This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 7 years ago.
I have the following code:
if(amStatus === "Logout") {
$('#row-qfauto-1 .large-9').append('<a id="next-password" class="button button-next" href="javascript:;">Next</a>')
$('#next-password').click(function() {
$('#row-html2-0').addClass('next-visible')
$(window).resize()
})
}
$('.button-next').on('click', function() {
$(this).hide()
$(window).resize()
})
As you can see button-next is being added dynamically with jQuery. So in order to make the button disappear when clicked I decided to use on.
However, the button doesn't disappear. It just stays there. When I do
$('.button-next').click(function() {
$(this).hide()
$(window).resize()
})
twice in the console, then the button disappears. Weird. What could be the problem?
Live site: http://www.chineselearnonline.com/amember/signup/cloprogressive
Try this:
if (amStatus === "Logout") {
$('#row-qfauto-1 .large-9').append('<a id="next-password" class="button button-next" href="javascript:;">Next</a>')
$('#next-password').click(function() {
$('#row-html2-0').addClass('next-visible')
$(window).resize()
})
}
$('#row-qfauto-1 .large-9').on('click', '.button-next', function(e) {
e.preventDefault();
$(this).hide()
$(window).resize()
});
Note: You are assigning event listener to #next-password as well as .button-next, is this the way you want to implement ?
Also make sure you dont have redundant id in your DOM
Try event delegation
$(document).on("click", ".button-next", function() {
// do stuff
})
or attaching click event when element created using jQuery()
$("#row-qfauto-1 .large-9")
.append($("<a></a>", {
"id":"next-password",
"class":"button button-next",
"href":"javascript:;"
"on": {
"click": function() {
$(this).hide()
$(window).resize()
}
},
"html":"Next"
}))
Related
This question already has answers here:
jquery stop child triggering parent event
(7 answers)
How do I prevent a parent's onclick event from firing when a child anchor is clicked?
(25 answers)
Prevent click from child firing parent click event
(4 answers)
Closed 5 years ago.
Click on "child" also make the alert work.
But what's the simple way to make click don't work on child elements?
Here is an example: https://fiddle.jshell.net/k8t5dpg2/
Html
<div id="secondary"> 1
<a>child</a>
</div>
Jquery
$('#secondary').click(function () {
alert('something')
});
Add an id to the child and :
$("#child").click(function () {
return false;
});
Use event.target to determine what is being clicked.
Example:
$('#secondary').click(function (event) {
var target = $(event.target);
if (target.is(this)) {
alert('something');
}
});
You can try this.
$('#secondary').click(function (event) {
if(event.target.nodeName ==='A') {
return false;
}else{
alert('something');
}
});
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 6 years ago.
html:
<div class="testSpanDiv"></div>
javascript:
$(document).ready(function () {
$('.testSpanDiv').append('<span id="testSpan">Hello</span>');
}
$('#testSpan').on('click', function(){
$(this).parent().remove();
});
Event is not firing while giving a click to span element added dynamically.
Event is firing if span element is statically added to the html.
Can you give any suggestion over it.
I tried like below also, but not working.
$('#testSpan').on('click', '.testSpanDiv', function(){
$(this).parent().remove();
});
You need to use like this:
$('.testSpanDiv').on('click', '#testSpan', function(){
// ^^ parent div ^^ element in which you want to bind the function
$(this).parent().remove();
});
your syntax error try this way
$(document).ready(function () {
$('.testSpanDiv').append('<span id="testSpan">Hello</span>');
$('#testSpan').on('click', function(){
$(this).parent().remove();
});
});
https://jsfiddle.net/7x8jbLpt/
You can delegate the event from body
Also note there are some syntax error in your code
$(document).ready(function () {
$('.testSpanDiv').append('<span id="testSpan">Hello</span>');
})
$('body').on('click', '#testSpan', function(){
alert("Hello")
});
JSFIDDLE
This question already has answers here:
jquery .click overriding anchor href when i dont want it to!
(4 answers)
Closed 8 years ago.
When setting up a div with a class, attaching a click event to that class using jQuery, it prevents any child href from working.
For example:
HTML
<div class="someClass">
some text here
and a link
</div>
JS
$('body').on('click', '.someClass', function(e) {
alert("clicked");
});
jsfiddle for this: http://jsfiddle.net/w6ero5j5/2/
it will always alert the message, even when clicking on the link.
how can I make the link works?
I dont know why do you want this. But, it happen when you put alert function.
Then If you execute this, there is not problem. code here
$('.someClass').on('click', function(){
var $this = $(this);
if ( $this.hasClass("ok") ) {
$this.removeClass("ok");
} else {
$this.addClass("ok");
}
});
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 9 years ago.
I have a simple example
<div id="test">add more text</div>
When you click on this text
jQuery('#test').on('click', function (event) {
$('body').append("<div id='newtest'>new test</div>");
});
you get some more text appear.
After I have clicked on 'add more text' my page looks like this
<div id="test">add more text</div>
<div id="newtest">new test</div>
I am wondering what I need to do to interact with the newtest div?
If I put the below in.
jQuery('#newtest').on('click', function (event) {
alert('not working?');
});
Nothing happens.
How do I interact with content that gets added after load? I thought .on helped me do this?
The reason why you need to use $(document).on() instead of $('#newtest').on() is because #newtest is a new element that you have injected into the DOM.
You must now use .on() ) against an higher element that was originally in the DOM, in order to attach an event handler to the newly injected element.
Thus:
jQuery(document).on('click', '#newtest', function (event) {
alert('This will work now');
});
You need to apply your click handler to the document.
jQuery(document).on('click', '#newtest', function (event) {
alert('not working?');
});
Hope this helps! :)
put the event on your document instead of an element
jQuery(document).on('click', '#newtest', function (event) {
alert('not working?');
});
Set the .on() event to a parent element, such as the body and delegate it to the newtest div.
jQuery('body').on('click', '#newtest', function (event) {
alert('Working!');
});
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
How can I stop an onclick event from firing for parent element when child is clicked?
I have a div with an onClick event but I don't want it to run when I click a link inside the div.
How can I stop the onClick effecting links inside the element?
<div onclick="dosomething();">
go somewhere but don't dosomething();
</div>
If you could use jQuery then,
$(document).ready(function() {
$("#yourDivId a").click(function(e) {
e.preventDefault();
});
});
//OR without jQuery
document.getElementById("yourAnchorId").onclick = function(evt) {
evt.stopPropagation();
//for IE window.event.cancelBubble = true
}
Hope it helps
$("div#some_id_or_class a").click(function(e) { e.stopPropagation(); })
Don't know how without jQuery. You would have to look for how to stop the propagation of the event in javascript.