相关疑难解决方法(0)

在jQuery 1.8之前,我可以使用.live()在点击按钮时触发,该按钮是由jquery动态插入的.

现在,.on()和.bind()都不适用于加载页面后添加到DOM的元素.

现在有哪些选择？

这是一个重复的问题，George 上一个问题的链接是我的答案

我遇到了一个问题，即选择器对动态生成的 javascript 内容不起作用。

最初的作品很好。一旦 for 循环生成更多 div，即使它具有相同的类，“鼠标悬停”css 样式也将不适用。

生成div的代码：

    for (x; x < y; x++) {
        output = output + '<div class="over">'+
            'But not for these generated divs'+ 
            '</div>';
    }
   $("#content").html(output);

使用类“over”设置 div 样式的代码：

$(".over").hover(function () {
    $(this).addClass("styling");
});


$(".over").mouseout(function () {
    $(this).removeClass("styling");
});

http://jsfiddle.net/kjhansen/1e08ypms/28/

我需要动态创建按钮并分配其onclick处理程序.Click handler可以是匿名函数(我不确定它是如何在JS中调用的).它被允许jQuery.
我试过这样的事情:

<div>
    <button id="x">Show</button>
</div>

function magick() {
    console.log('some special magick');
}

function createButton(itsHandler) {
    var guts = '<button id="__internal" onclick="' 
        + itsHandler +    // <-- that's wrong
        '">Test</button>';
    $($.trim(guts)).appendTo('body');
}

$(document).ready(function () {
    $("#x").bind("click", function() { 
            createButton(magick);
        });
});

但是不起作用.

(这是jsfiddled代码)

如何实现？
UPD1:如果在createButton函数内完成它会更好.

我正在做一个项目，我使用 ajax 将内容加载到页面中。

我的 jquery 函数是：

function load_room() {
    var sem = 0;

    $.ajax({
        url: 'ajax/room_ajax.php?option=2',
        type: 'POST',
        data: { 'sem': sem },
        dataType: "json",
        success: function (data) {
            console.log(data[0]);
            $("#room").html("");
            for (var i = 0; i < data.length; i++) {
                var x = i + 1;
                $("#room").append("<tr><td>" + x + "</td><td>" + data[i]['room_name'] + "<td><a id='edit' href='#'>edit</a></td></tr>");
            };
        }
    });
}

内容加载完全成功，但是当我点击<a id='edit' href='#'>edit</a> 元素时，它不会触发相应的点击事件。 代码是这样的：

$('#edit').on('click', function(){
    alert("hai")
});

有人可以看看这个代码,其中每个函数都运行完美但只有click事件(这是代码的最后一个)

 $('ul#showUsernames li').on('click', function () {
    selectedUsername = $(this).text();
    if (selectedUsername != chatUsername) {
        chatTitleName.text("Chat between " + chatUsername + " and " + selectedUsername);
    }
 });

在这里我使用了.click,bind('click',function他们也没有工作.

我在on这里使用是因为我通过jQuery 动态生成li元素.

我不确定这是否与我在项目中使用SignalR有关.

请帮忙.

我在使用jquery添加列表项后单击时删除列表项有些问题.如果我不得不猜测为什么会发生这种情况,那是因为jquery可能会在添加列表项后查看我的原始HTML文档而不是更新的文档？无论哪种方式,我都无法弄清楚如何解决它.

这是我的HTML:

<form>
        <div>
            <label for="todo">I need to:</label>
            <input type="text" id="todo" />
        </div>
        <button id ="add" type="button">Add to your to-do list!</button>
</form>
<ul>
</ul>

而我的jQuery:

$(document).ready(function() {
    $('#add').click(function() {
        var item = $('#todo')
        $('ul').prepend("<li>"+item.val()+"</li>");
    });
        $('li').click(function() {
        $(this).remove();
    });
});

我正在编写一个代码,我通过附加一个ul元素动态添加内容.

问题是如果我单击动态创建的名为savePalette的按钮它不起作用..虽然它确实适用于第一个,因为我在click函数之前定义了addPalette函数.

根据我的阅读,.on()应该适用于添加动态内容的情况.

这是HTML结构:

<ul class="palettes">
    <li class="paletteGroup">
        <ul>
            <li class="colorpalette" style="background-color: #00c4ff;"></li>
            <li class="colorpalette" style="background-color: #00a6ff;"></li>
            <li class="colorpalette" style="background-color: #0091ff;"></li>
            <li class="colorpalette" style="background-color: #007bff;"></li>
            <li class="paletteControls">
                <button name="savePalette" class="savePalette">Save</button>
                <button name="changeName" class="changeName">Change Name</button>
            </li>
        </ul>
    </li>
</ul>

JavaScript的:

function addPalette() {
        var defaultColors = ["#00c4ff", "#00a6ff", "#0091ff", "#007bff"];

        $("ul.palettes").append("<li class=\"paletteGroup\"><ul>" +
        "<li class=\"paletteControls\"><button name=\"savePalette\" class=\"savePalette\">Save</button>" +
        "<button name=\"changeName\" class=\"savePalette\">Change Name</button></li>" +
        "</li></ul></li>");
        $("li.paletteGroup:last").hide();

        for(var i = 1; i <= 4; i++) {
            var j = (4 - i);
            $("ul.palettes …

我设法解雇了

$('.edit').click(function(){} 和 $('.button').click(function(e){}

$('.edit').click(function(){
  // uid = userid
  var uid = '123';
  var self = $(this);
  // closest in the parent elements
  // use .find with caution unless you sure you have only one .input
  // contenteditable makes element editable. use with caution as it accepts html tags, javascript
  // .addClass for styling
  var input = self.closest('tr').find('.input');
  input.attr('contenteditable','true').addClass('editable');
  self.closest('td').html('<span class="button">Save</span>');
  $('.button').click(function(e){
    e.preventDefault();
    var field = $(this).closest('tr').data('field');
    // get text instead of html from editable tr
    var value = $(this).closest('tr').find('.input.editable').text(); …

我有一个正确运行的JQuery FIddle.它使用JQUERY Steps PlugIn.现在如果你在最后一步运行JQuery FIddle,你会发现三个按钮"Save","Previous"和"Finish".如果我点击,Save button我想显示一条提示"你已被点击".如果您滚动到JSFiddle中HTML部分的底部,您将找到下面的代码.

代码工作正常:

// on Save button click
    $(".actions").on("click",".saveBtn",function(){
      alert("You have been clicked!");
    });
  });

代码无效:

 $( ".saveBtn" ).click(function() {
      alert("You have been clicked");
    });

问题:为什么第二个代码段不起作用？

我试图动态添加一个按钮 - 第一个按钮有效但其他按钮无效.我以前使用过该live函数,但jQuery 1.9.1删除了该函数.我该怎么做才能让新添加的按钮起作用？

HTML代码:

<div class="take">
    <p>this is the para</p>
    <button class="test">copy</button>
</div>

jQuery代码:

$('.test').on('click', function() {
    var a = $(this).parent();
    new.clone().insertAfter(a);
})

这是jsfiddle.

当jQuery生成新字段时,新字段不能与'ent​​er'一起使用.

这是我的脚本:

咖啡

$('.teaser-form').keyup (e) ->
  if e.keyCode == 13
    $('.add-new-list').click()

form.haml

= f.simple_fields_for :products do |p|
  = render 'product_fields', :f => p 
.gear-item-add
  = link_to_add_association 'add item', f, :gears, class: "btn btn-default add-new-list"

所以jQuery调用link_to_add_association按钮创建下面显示的字段.(第一个字段是初始字段,所以如果按下回车键,则会产生第二个字段和第三个字段...但如果我尝试继续第三个字段并按Enter键,则不会发生任何事情)

_product_field.haml

.nested-fields.gear-patrol
  .col-md-12
    = f.text_field :list, class: 'teaser-form form-control', placeholder: 'testing'