-1

I added click event to button . it is working fine.

 $("#button1").click(function(){var elem = $("<p></p>").text("hello").attr("id","created");
                     $("body").append(elem);});
$("#button2").click(function(){ $("#created").hide();});

https://jsfiddle.net/e89uf3wg/5/

But adding click event to new created element not working. 

 $("#button1").click(function(){var elem = $("<p></p>").text("hello").attr("id","created");
                     $("body").append(elem);});
$("#created").click(function(){ $("#created").hide();});

https://jsfiddle.net/e89uf3wg/19/

Can someone explain. i am expecting. I create only one element and when i click on that element it should hide. thats it. This question is not about id and class . just create one element and try to experiment what i am saying. I want when i click on created paragraph it should hide itself.

beginner
  • 2,366
  • 4
  • 29
  • 53
  • 1
    with `$("#button1").click` and `$("#button2").click` you are adding the click handler to buttons which are already present in your DOM. So before executing these 2 lines your HTML has those DOM element well created. Now in second case `$("#button1").click` is creating an element with id `created`. But the event binding code i.e. `$("#created").click` got executed at the time of loading of the page. Hence at that time there was no element with id `created`. So `$("#created").click(function(){ $("#created").hide();});` fails – vijayP Aug 22 '16 at 09:48
  • You need to bind click event to the newly created element. Then only it will work. – Anoop LL Aug 22 '16 at 10:12
  • This question is not about id and class . just create one element and try to experiment what i am saying. – beginner Aug 22 '16 at 10:14
  • Please tidy up your code before posting and ask the question clearly. The `button2` which is useless should be deleted to prevent causing misunderstanding. And dont expect others to understand what you want to ask if your question is unclear. Thanks! – Han Lim Aug 22 '16 at 10:27

3 Answers3

1

The created element is a newly created element so at the time of page loading the DOM parser is not able to find the element and bind the click event that is the reason why your second case is not working. Here is the solution.

$(document).ready(function(){
$("#button1").click(function(){
var elem = $("<p></p>").text("hello").attr("class","created");
                 $("body").append(elem);

              $( ".created" ).bind( "click", function() {
$( ".created" ).hide();

});   
});
});

What i did here is while creating the element I am manully binding a click event to the element. If you create element with ID, then it will work only for the first time. Second time when you click the button it will create a new element with same id and the code wont work. So in my example i have used class instead of ID. Here is the working copy https://jsfiddle.net/aam0nsc4/

Anoop LL
  • 1,548
  • 2
  • 21
  • 32
-1

Working example: https://jsfiddle.net/e89uf3wg/8/

I changed id to class. Using id you can create only one element.

$("#button1").click(function(){
    var elem = $("<p></p>").text("hello").addClass('created');
  $("body").append(elem);
});

$(document).on('click', '.created', function() {
  $(this).hide();
});
ofca
  • 661
  • 5
  • 10
  • Please tell we what i did wrong. i am filling like a criminal but i don't know my crime. please tell we what i did wrong please. – beginner Aug 22 '16 at 10:00
-1

This is correct behavior. In the second example, the button will be created not before button1 is clicked, so when you try to attach the click event to #created the button does not exist. You should either create the button before adding the click event or add the click event withing the first onClick function.

So you could do something like:

$("#button1").click(function(){
  var elem = $("<p></p>").text("hello").attr("id","created");
  $("body").append(elem);
  $("#created").click(function(){ $("#created").hide();}); // TODO: Check if not already listening to event
});
JaschaL
  • 81
  • 7