Question

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

MY JQUERY

$("#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>

Answer 1

尝试在此背景下使用event-delegation，

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

Answer 2

根据程序的不同，如果只是在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");
             });
       }
   });
}

附加后DIV不可点击使用JQUERY append（）

2 个答案: