Web Analytics Made Easy -
StatCounter jquery click command not working on dynamically added html - CodingForum

Announcement

Collapse
No announcement yet.

jquery click command not working on dynamically added html

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • jquery click command not working on dynamically added html

    hi.

    i am dynamically adding html to my page using the .html(...) function which is triggered based on some user action.

    i have also defined a click function specific to some id tags that is in the dynamic html. when i generate the dynamic html and call the click function, nothing happens (aka, the click function is not getting called...) what could be the problem?

    i have attached the code below:

    following html code called upon a user action, which adds a button on the page with id = addTask:

    Code:
    .html("<input name='add' type='button' value='Add' id='addTask'>")
    when the user clicks on this button, the following function should be called, but it ISNT...and this is the issue:

    Code:
    $('#addTask').click(function() {
       alert("adding...");
    }
    when i click the add button, i don't get an alert...

  • #2
    Well I've got two questions, are you using the same ID for two elements? Because you say you dynamically insert the data, so could it be inserted twice? If so, use a class. The second is do you add the event listener before or after? If it's before, you need to place it after.

    If you are using a class, and it is being inserted multiple times, you should look into using the live function which works similar to binding. It'll allow you to insert dynamic data without having to bind it all the time.

    Comment


    • #3
      This is because you are binding your click event to the element that is not yet created. To overcome this problem use .live() function available in jQuery 1.3 as Iszak suggested.

      If you are using jQuery 1.2 and can't change it read this article on how to bind events to newly created DOM elements.

      Comment


      • #4
        use this

        $('#divid').live('click', function() {
        alert('hello');
        });

        Comment


        • #5
          Source : http://coding-issues.blogspot.in/2013/06/javascript-jQuery-click-not-working-for-dynamically-created-items.html

          if you created your elements dynamically(using javascript), then this code doesn't work.
          Because, .click() will attach events to elements that already exists. As you are dynamically creating your elements using javascript, it doesn't work.

          For this you have to use some other functions which works on dynamically created elements. This can be done in different ways..

          Earlier we have .live() function

          $('selector').live('click', function()
          {
          //your code
          });

          but .live() is deprecated.This can be replaced by other functions.

          Delegate():

          Using delegate() function you can click on dynamically generated HTML elements.

          Example:

          $(document).delegate('selector', 'click', function()
          {
          //your code
          });

          ON():

          Using on() function you can click on dynamically generated HTML elements.

          Example:

          $(document).on('click', 'selector', function()
          {
          // your code
          });
          Last edited by VIPStephan; Aug 7, 2013, 02:52 PM. Reason: removed link (backlink spamming suspected)

          Comment

          Working...
          X