DIV Not Clickable After Appended Using JQUERY append() [duplicate]

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>

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
– JKaan, Commented Nov 4, 2014 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
– Rajaprabhu Aravindasamy, Commented Nov 4, 2014 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
– user3715962, Commented Nov 4, 2014 at 14:50

Rajaprabhu Aravindasamy · Accepted Answer · 2014-11-04 14:34:28Z

1

Try to use event-delegation at this context,

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

answered Nov 4, 2014 at 14:34

Rajaprabhu Aravindasamy

67.2k17 gold badges107 silver badges133 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user3715962 Over a year ago

That worked. Care to explain?

Rajaprabhu Aravindasamy Over a year ago

@user3715962 Can you please have a look at the link that i provided in my answer..??

Arron · Accepted Answer · 2014-11-04 14:39:56Z

0

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

answered Nov 4, 2014 at 14:39

Arron

9166 silver badges15 bronze badges

Collectives™ on Stack Overflow

DIV Not Clickable After Appended Using JQUERY append() [duplicate]

2 Answers 2

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Linked

Related