使用 JQUERY append() 追加后 DIV 不可点击 [重复]答案

【问题标题】：DIV Not Clickable After Appended Using JQUERY append() [duplicate]使用 JQUERY append() 追加后 DIV 不可点击 [重复]
【发布时间】：2014-12-31 11:53:56
【问题描述】：

我正在将一个 DIV 附加到现有的 DIV。附加正在工作并显示，但我的 div 需要是可点击的。目前我无法让 onclick 工作。我试图让每个追加都有一个唯一的类或 id，但 div 仍然不可点击。

我的查询

$("#searchUsersText2").keypress(function() {
    var y = $('#searchUsersText2').val();
    if ($('#searchUsersText2').val()){
        $.ajax({ 
            type: "POST",
            url: '../home/findUser.php',
            data: "dataString="+y,
        success: function(data) {
            $("#searchUsersBodyResults2").empty();
            $("#searchUsersBodyResults2").append("<div class='inputs'>"+data+"</div>");
        }
    });
}
}); 
$("#searchUsersText2").click(function()
{
     $("#searchUsersContainer2").fadeToggle(300);
});

$(".inputs").click(function()
{
    alert("SUCCESS");
});

我的 HTML

<!DOCTYPE html>
<html>
    <head>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
         <script src="http://www.croeberdemo.site40.net/external/listItems.js"></script>
     </head>     
  <body >


            <ul id="nav">
            <li id="searchUsers2">
                <a href="#" id="searchUsersLink2">
                    <input id="searchUsersText2" placeholder="Search for Users" />
                </a> 
                <div id="searchUsersContainer2">
                    <div id="searchUsersBodyResults2" class="notifications">
                    </div>
                </div>
            </li>
            </ul>
 </html>

【问题讨论】：

已回复hundreds of times
追加事件时不会添加到 div 中。然而，jQuery 有一个特殊的方法：$('#searchUsersBodyResults2").on('click', 'div', function() {});。这将绑定到父级，当新的 div 附加到该父级时，单击事件也会添加到该 div。
@George 我只是觉得非常懒惰从谷歌中挑选这个问题并使用它投下密切的投票。只是等着有人这样做。你发起的，我刚刚完成。
我想我不知道要找什么
好吧，你关闭了它，但我还是学到了一些东西。无论如何感谢您的回答。“直接事件仅在调用 .on() 方法时附加到元素。在这种情况下，由于调用 .on() 时我们的新锚不存在，因此它不会获得事件处理程序。”

标签： jquery html

【解决方案1】：

根据程序，如果只在 ajax 回调中绑定事件可能会更好。

$("#searchUsersText2").keypress(function() {
 var y = $('#searchUsersText2').val();
 if ($('#searchUsersText2').val()){
    $.ajax({ 
        type: "POST",
        url: '../home/findUser.php',
        data: "dataString="+y,
        success: function(data) {
            $("#searchUsersBodyResults2").html("<div class='inputs'>"+data+"</div>");
            $("#searchUsersBodyResults2 .inputs").click(function(){
                   alert("SUCCESS");
             });
       }
   });
}

【讨论】：

【解决方案2】：

尝试在这种情况下使用event-delegation，

$("#searchUsersBodyResults2").on("click", ".inputs", function() {
    alert("SUCCESS");
});

【讨论】：

那行得通。需要解释一下吗？
@user3715962 你能看看我在回答中提供的链接吗？？