Is There An "update" Function For Jquery?

August 21, 2024 Post a Comment

if we push Html to the Dom , it will be display there but its not updated. is there any update function to jQuery ? Anchor link not working when we push to the DOM , every answers

Solution 1:

You should use the $(document).on('click', '.remove' instead:

$(function(){
   $(document).on('click', '#add', function(){
       $('.outer').append('<div class="data"><input type="text" value="enter" /><a href="#" class="remove">Remove</a></div>');
   });
   $(document).on('click', '.remove', function(){
       alert('not working');
   });
});

This way jQuery listens for click events on the document, and if the target element is .remove (for example) - the function will be triggered. It doesn't matter if the elements are added dynamically - the click event is always on the document, and jQuery will check the target element (and act accordingly).

Here is the update to your snippet:

$(function(){
   $(document).on('click', '#add', function(){
       $('.outer').append('<div class="data"><input type="text" value="enter" /><a href="#" class="remove">Remove</a></div>');
   });
   $(document).on('click', '.remove', function(){
       alert('not working');
   });
});

<!doctype html><html><head><metacharset="utf-8"><title>Untitled Document</title></head><body><divclass="outer"><inputtype="button"value="Click me"id="add" /></div><!-- /.outer --><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script></body></html>

Solution 2:

You are attaching click event to element that does not exist in document.

You can use jQuery() to attach the event to the element when the element is dynamically created.

$(function() {
  $("#add").on("click", function() {
    var div = $("<div>", {
      "class": "data",
      html: $("<input>", {
        type: "text",
        value: "enter"
      }),
      append: $("<a>", {
        href: "#",
        "class": "remove",
        html: "Remove",
        on: {
          click: function() {
            alert("not working");
          }
        }
      })
    })
    $(".outer").append(div);
  });
});

<!doctype html><html><head><metacharset="utf-8"><title>Untitled Document</title></head><body><divclass="outer"><inputtype="button"value="Click me"id="add" /></div><!-- /.outer --><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script></body></html>

Solution 3:

As per this question, I solved it by changing the line

$('.remove').on('click', function(){

to $('body').on('click','.remove', function(){

UPDATE: $('.outer').on('click','.remove', function(){

jQuery event handler .on() not working

$(function(){
   $('#add').on('click', function(){
       $('.outer').append('<div class="data"><input type="text" value="enter" /><a href="#" class="remove">Remove</a></div>');
   });
   $('.outer').on('click','a.remove', function(){
       alert('not working');
   });
});

<!doctype html><html><head><metacharset="utf-8"><title>Untitled Document</title></head><body><divclass="outer"><inputtype="button"value="Click me"id="add" /></div><!-- /.outer --><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script></body></html>

Solution 4:

The problem is that $('.remove') is not defined at the time you attempt to assign an Event to it. Change

$(function(){
   $('#add').on('click', function(){
       $('.outer').append('<div class="data"><input type="text" value="enter" /><a href="#" class="remove">Remove</a></div>');
   });
   $('.remove').on('click', function(){
     alert('not working');;
   });
});

$(function(){
  $('#add').click(function(){
    $('.outer').append("<div class='data'><input type='text' value='enter' /><a href='#' class='remove'>Remove</a></div>");       
    $('.remove').on('click', function(){
      $(this).parent().remove();
    });
  });
});

<head><scriptsrc='https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'></script><metacharset='utf-8'><title>Untitled Document</title></head><body><divclass='outer'><inputtype='button'value='Click me'id='add' /></div></body>

Solution 5:

$(function(){
   $('#add').on('click', function(){
       $('.outer').append('<div class="data"><input type="text" value="enter" /><a href="#" class="remove">Remove</a></div>');
   });
   $('.remove').on('click', function(){
       alert('not working');
   });
});

<!doctype html><html><head><metacharset="utf-8"><title>Untitled Document</title></head><body><divclass="outer"><inputtype="button"value="Click me"id="add" /></div><!-- /.outer --><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script></body></html>

Html5 Playground