Question

我对JS＆amp; amp; JQuery，请原谅可能是一个简单而愚蠢的问题。

背景
我的页面上有一个包含几个div的div（＃idle-variable）。点击顶级div，它基本上显示其他div（#addvariable）。没有什么比显示：无;和.show（）。简单。在该div中的另一个动作（更改下拉列表）中，我基本上想要在第一个实例下面注入/插入顶级div（＃idle-variable）。

问题：
基本上，.click函数不适用于我新插入的div。这可能是因为两个div共享相同的ID，但我有一个偷偷摸摸的怀疑，它在DOM中无法识别。我的一个朋友说了一些关于我必须“重新运行”我的jquery以便在DOM中可读的东西。

问题：
我怎样才能正常工作？我希望能够在页面中添加动态数量的这些空闲变量，我需要确保我的.click函数适用于所有添加的DIVS。

$(function(){
  $('#idle-variable').click(function(event) {
    $("#addvariable").show(400);

});
});


//create variable in db & show value entry
$("#variabletype").change(function() {
  $("#varholder").css("display", "inline-block");

   $.ajax({
       type: "POST",
       url: "/myphpfile.php",
       data: {"variabletype": $("#variabletype").val()},

       success: function(){

        $( "#idle-variable" ).after("<div id="#idle-variable>content</div>");

       }
    });



});

Answer 1

为了使代码工作，它需要使用，而ids只应该在一个元素上。如果它可以多次出现在页面上，则需要使用类。

$(document).on("click,'#idle-variable', function(event) {
    $("#addvariable").show(400);
});

你应该使用课程

$(document).on("click,'.idle-variable', function(event) {
    //$("#addvariable").show(400);  //not sure how this relates to the clicked element. 
    $(this).find(".addvariable").show(400); //if it is a child
});

您的代码中也有拼写错误。

Answer 2

基于ID的选择器将仅应用于第一个元素。请参阅此处的示例http://jsfiddle.net/9GN2P/2/

如果您希望将相同的事件处理程序绑定到多个元素，请务必使用基于类的方法，而不是基于ID的方法。

并且，您期望事件处理程序也可以使用动态创建的元素。如果您使用的是旧版本的jquery，请使用实时方法，如

$('yourselector').live('click',function(){

});

由于不推荐使用live，如果您使用的是新版本，请使用“on”方法

$('containerselector').on('click','yourselector',function(){

});

编辑以回答您的评论：要创建动态元素并附加到DOM，可以按照波纹管模式进行操作。在这里，我将创建一个ID为“newID”的DIV，类“newClass”，内容为“NEW DIV !!”以及它的单击事件处理程序。它将被推送到id为'containerID'

的另一个div中

$('<div />',{
        id:'newID',
        'class':'newClass',
        text:'NEW DIV!!',
        click:function(){alert('hi');}
        })
 .appendTo('div#containerID');

这只是一个演示。

JQuery没有处理插入/注入DOM元素

2 个答案: