CODEWITHSUNDEEP
javascriptjquerydom
user2828701
user2828701

Reputation: 305

JQuery not working on inserted/inject DOM element

I am still a bit new to JS & JQuery, so please excuse what may be a simple and stupid question.

Background:
I have a div on my page that holds several divs (#idle-variable). On click of the top level div, it basically shows the other divs (#addvariable). Nothing more than display: none; and .show(). Easy. On another action within that div (change of drop down), I essentially want to inject/insert that top level div (#idle-variable) underneath the first instance.

Issue:
Essentially, the .click function is not working on my newly inserted div. This may be because the two div's share the same ID, BUT I have a sneaky suspicion that it's not recognized in the DOM. A friend of mine said something about I have to "re-run" my jquery in order for it to be readable in the DOM.

Question:
How can i make this work properly? I want to be able to add a dynamic number of these idle-variables to the page and I need to make sure my .click function works for all added DIVS.

$(function(){
  $('#idle-variable').click(function(event) {
    $("#addvariable").show(400);

});
});


//create variable in db & show value entry
$("#variabletype").change(function() {
  $("#varholder").css("display", "inline-block");

   $.ajax({
       type: "POST",
       url: "/myphpfile.php",
       data: {"variabletype": $("#variabletype").val()},

       success: function(){

        $( "#idle-variable" ).after("<div id="#idle-variable>content</div>");

       }
    });



});

Upvotes: 2

Views: 2239

Answers (2)

Ananthan Unni
Ananthan Unni

Reputation: 1304

The ID based selector will be applied to the first element only. See the example here http://jsfiddle.net/9GN2P/2/

If you are looking to bind same event handler to multiple elements, definitely go with the class based approach, instead of ID based approach.

And, you are expecting event handler to work with dynamically created elements as well. If you are using older versions of jquery, use the live method like

$('yourselector').live('click',function(){

});

Since live is deprecated and if you are in a new version, use the 'on' method

$('containerselector').on('click','yourselector',function(){

});

Editing to answer your comment: To create dynamic element and append to DOM, you can follow the bellow pattern. Here, I will create a DIV with id "newID", class "newClass", content "NEW DIV!!" and a click event handler for it. And it will be pushed into another div with id 'containerID'

$('<div />',{
        id:'newID',
        'class':'newClass',
        text:'NEW DIV!!',
        click:function(){alert('hi');}
        })
 .appendTo('div#containerID');

This is just a demo.

Upvotes: 2

epascarello
epascarello

Reputation: 207501

Well to make the code work it would need to use on and ids are only supposed to be on one element. If it can be on the page multiple times you need to use classes. 

$(document).on("click,'#idle-variable', function(event) {
    $("#addvariable").show(400);
});

you should be using classes

$(document).on("click,'.idle-variable', function(event) {
    //$("#addvariable").show(400);  //not sure how this relates to the clicked element. 
    $(this).find(".addvariable").show(400); //if it is a child
});

You also have a typo in your code with quotes.

Upvotes: 3

Related Questions