jQuery on click for dynamic element triggering when not clicked

Question

I have a button that I am appending to the page. When that button is clicked, it should run some code.

Instead of triggering only when that button is clicked, any clicks on the page triggers it.

I've been able to replicate the issue with only a few lines of code, see the JSFiddle linked.

var myButton = '<div id="myButton">Do Not Click Me</div>';
$('#parent').html(myButton);

jQuery(document).on('click', jQuery('#myButton'), function (e) {
    alert('marco');
});

https://jsfiddle.net/aj4u1y9n/

How can I make the alert run only when the button is clicked?

@j08691 In my actual code I have to use jQuery to prevent a conflict with another library. — Goose
– Goose, Commented Sep 9, 2016 at 19:30
It seems some jack@ss thinks that our jQuery stinks, I'm +1 everyone. — zer00ne
– zer00ne, Commented Sep 9, 2016 at 19:43

Arnav Borborah · Accepted Answer · 2016-09-09 19:29:21Z

1

Don't use a jQuery selector here:

jQuery(document).on('click', jQuery('#myButton'), function (e)

Instead, do:

$(document).on('click', '#myButton', function (e)

Example:

var myButton = '<div id="myButton">Do Not Click Me</div>';
$('#parent').html(myButton);

$(document).on('click', '#myButton', function(e) {
  alert('marco');
});

#myButton {
  background: #8888ff;
  padding: 1em;
  width: 4em;
  margin-left: 4em;
  margin-top: 4em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
</div>

By the way, your code could be simplified to this:

var myButton = '<div id="myButton">Do Not Click Me</div>';
$('#parent').html(myButton);

$('#myButton').click(function() {
  alert('marco');
});

#myButton {
  background: #8888ff;
  padding: 1em;
  width: 4em;
  margin-left: 4em;
  margin-top: 4em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
</div>

BTW, don't switch between the selectors jQuery and $, use one or the other.

answered Sep 9, 2016 at 19:29

Arnav Borborah

11.8k8 gold badges51 silver badges94 bronze badges

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

1 Comment

Goose Over a year ago

It appeared like somebody downvoted the question and all three answers at once.

Michael Troger · Accepted Answer · 2016-09-09 19:45:02Z

0

The way you wrote the click listener, you actually listen for clicks on the whole document. Have a look at the jQuery API:

https://api.jquery.com/on/ or
https://api.jquery.com/click/ as the shorter version

for more information.

You can achieve what you wish like that:

var $myButton = $('<div id="myButton">Do Not Click Me</div>');
$myButton.click(function (e) {
    alert('marco');
});
$('#parent').append($myButton);

Explanation: You can add the click listener before you insert the element into the DOM. Searching it again in the DOM for adding a click handler is just unnecessary.

Fiddle: https://jsfiddle.net/bkbczLug/

edited Sep 9, 2016 at 19:45

answered Sep 9, 2016 at 19:28

Michael Troger

3,5272 gold badges28 silver badges46 bronze badges

Collectives™ on Stack Overflow

jQuery on click for dynamic element triggering when not clicked

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related