DIV Not Clickable After Appended Using JQUERY append()

Question

I am appending a DIV to an existing DIV. The append is working and showing, but my divs need to be clickable. Currently I cannot get the onclick to work. I have tried to make each append have a unique class or id and still the div is not clickable.

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");
});

MY 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>

It's been answered [hundreds of times](https://www.google.co.uk/search?q=attach+dynamic+element+site:stackoverflow.com) — George, Nov 04 '14 at 14:35
When you append the event isn't added to the div. jQuery has a special method for this however: `$('#searchUsersBodyResults2").on('click', 'div', function() {});`. This will bind to parent and when a new div is appended to that parent the click event is also added to that div. — JKaan, Nov 04 '14 at 14:36
@George I just felt very lazy to pick that question from google and cast a close vote by using that. Just waited for someone to do that. You initiated it, i just finished it. — Rajaprabhu Aravindasamy, Nov 04 '14 at 14:42
Well yall closed it, but I still learned something. Thanks for answering it anyways."Direct events are only attached to elements at the time the .on() method is called. In this case, since our new anchor did not exist when .on() was called, it does not get the event handler." — user3715962, Nov 04 '14 at 14:50

score 1 · Answer 1 · answered Nov 04 '14 at 14:34

1

Try to use event-delegation at this context,

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

answered Nov 04 '14 at 14:34

Rajaprabhu Aravindasamy

66,513
17
101
130

That worked. Care to explain? – user3715962 Nov 04 '14 at 14:36
@user3715962 Can you please have a look at the link that i provided in my answer..?? – Rajaprabhu Aravindasamy Nov 04 '14 at 14:38

score 0 · Answer 2 · answered Nov 04 '14 at 14:39

Depending on the program, you might be better if by just binding the event within your ajax callback.

$("#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 Not Clickable After Appended Using JQUERY append()

2 Answers2