Question

在使用JSON并在此之后制作结构化内容时，我遇到了一个问题。

事情是，面板的唯一HTML是：

<div class="users">
            <center>loading</center>
            <script>update_users();</script>
        </div>

但是在用JSON下载信息之后，最终会出现类似的信息：

<div class="users">
<p class="name">User1</p>
<div class="detailed">
    <span>Entry1: value1</span>
</div>
</div>

就我的情况而言，例如，我希望详细信息为toggle();，因为display:none应该是默认值，但Jquery不想选择新内容。< / p>

//does work
  $(".users").click(function(){
            $(".users .detailed").toggle();
        });

//doesn't work
    $(".users .name").click(function(){
            $(".users .detailed").toggle();
        });

如何解决Jquery无法选择插入页面的新内容的问题？

Answer 1

对于新内容，您需要事件委派

$(document).on('click',".users .name",function(){
     $(".users .detailed").toggle();
});

Answer 2

有.live()方法，请阅读相关内容。我建议你使用：

$.find(".users .name").click(function(){
            $(".users .detailed").toggle();
        });

或者您可以使用.on("click", yourfunction);

绑定某些功能

Answer 3

使用on

$(document).on('click',".users .name",function(){
     $(".users .detailed").toggle();
});

Answer 4

由于您动态创建.name段，因此简单.click()将不起作用。您必须使用.on()方法

$(document.body).on('click', '.name' ,function(){
   $(".detailed").toggle();
});

从技术上讲，如果你有超过1个用户而不是上述方法将无法工作，因为它将切换所有具有.detailed类的元素你应该尝试这个

$(document.body).on('click', '.name' ,function(){
   $(this).next().toggle();
});

EXAMPLE

Answer 5

$(".users .name").unbind();

取消绑定然后重新绑定

选择刚刚创建的元素

5 个答案: