I attach click event to appended element by $('body').on('click'). But if I click id one two times, it also alert two times when its appended element click.
If I attach like this $('body').off().on("click"), the last appended element click can alert only (if I click id one first and then click id two,then id one appended element click can't alert).
How can I attach click event for every appended element to alert once ?
$(document).ready(function(){
test.init();
})
var test = {
init : function() {
$("#one").on("click",function(){
test.appendOne();
});
$("#two").on("click",function(){
test.appendTwo();
});
},
appendOne: function() {
$("<button class='one-after'>").append("<h1>One</h1>").appendTo("body");
$('body').on("click",'.one-after',function() {
alert("clickedOne");
});
},
appendTwo: function() {
$("<button class='two-after'>").append("<h1>Two</h1>").appendTo("body");
$('body').on("click",'.two-after',function() {
alert("clickedTwo");
});
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="one">One</button>
<button id="two">Two</button>
You should use selector children() which is a selector on every first level children of the body element (see documentation reference at https://api.jquery.com/children/)
So your code would become :
$('body').children().on("click")
with a slight modification, add the event directly to the appended object as below:
$("<button class='one-after'>").append("<h1>One</h1>").appendTo("body")
.on("click",function() {
alert("clickedOne"); })
you can repeat this pattern for the other one
That happen since every time you click the button, you bind a new event on the body.
You already are using event delegation, you only have to bind the event once and every new element will have an event "attached" to it. Move your event binding inside your init:
$(document).ready(function(){
test.init();
})
var test = {
init : function() {
$('body').on("click",'.one-after',function() {
alert("clickedOne");
}).on("click",'.two-after',function() {
alert("clickedTwo");
});
$("#one").on("click",function(){
test.appendOne();
});
$("#two").on("click",function(){
test.appendTwo();
});
},
appendOne: function() {
$("<button class='one-after'>").append("<h1>One</h1>").appendTo("body");
},
appendTwo: function() {
$("<button class='two-after'>").append("<h1>Two</h1>").appendTo("body");
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="one">One</button>
<button id="two">Two</button>
You may simply change these two lines:
$("<button class='one-after'>").append("<h1>One</h1>").appendTo("body");
$('body').on("click",'.one-after',function() {
to (chain appendTo with on. Remove the event delegation):
$("<button class='one-after'>").append("<h1>One</h1>").appendTo("body").on("click",function() {
Instead of creating a delegation click event handler on the body you can simply add the click event to each element.
$(document).ready(function(){
test.init();
})
var test = {
init : function() {
$("#one").on("click",function(){
test.appendOne();
});
$("#two").on("click",function(){
test.appendTwo();
});
},
appendOne: function() {
$("<button class='one-after'>").append("<h1>One</h1>").appendTo("body").on("click",function() {
alert("clickedOne");
});
},
appendTwo: function() {
$("<button class='two-after'>").append("<h1>Two</h1>").appendTo("body").on("click",function() {
alert("clickedTwo");
});
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="one">One</button>
<button id="two">Two</button>
You can use jQuery's .one() variant:
$("#one").one("click",function(){
test.appendOne();
});
This will fire only once. http://api.jquery.com/one/
Related
Why doesn't the on click listener work after clicking on the first list-button?
JSFiddle link
$(".acceptTask").on("click", function(){
acceptTask(this);
});
$(".solveTask").on("click", function() {
solveTask(this);
});
function solveTask(e){
...
}
function acceptTask(e){
...
$(document).on("click", ".solveTask", solveTask);
}
$('.solveTask').on('click', /*...*/) only applies the event handler to anything that has a class "solveTask" at that time. So when you add the solveTask class in your acceptTask function, add an event listener.
$(e).addClass('btn-warning solveTask')
.click(function () { solveTask(this); });
See fiddle: https://jsfiddle.net/1203y34b/1/
I had this problem previously and used 'delegate' instead of 'on':
$(document).delegate('.solveTask', 'click', solveTask)
When I add an item using click event and exists another element with the same class the event is duplicated.
$(".add-first").on("click", function() {
var firstContainer='<div class="second-container"><button class="add-second">add second</button></div>';
$(this).closest(".first-container").append(firstContainer);
$(".add-second").on("click", function() {
$(this).closest(".second-container").append("<br>example");
});
});
$(".add-second").on("click", function() {
$(this).closest(".second-container").append("<br>example");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="first-container">
<button class="add-first">add first</button>
<div class="second-container"><button class="add-second">add second</button></div>
</div>
Then when I press one click in add first this duplicate event in each button add second, then when I press click on the second button it has some events, the issue is duplicated event.
Try to implement event-delegation instead of binding an event event every time when you are creating a new button,
$(".add-first").on("click", function() {
var firstContainer = '<div class="second-container"><button class="add-second">add second</button></div>';
$(this).closest(".first-container").append(firstContainer);
});
$(".first-container").on("click", ".add-second", function() {
$(this).closest(".second-container").append("<br>example");
});
DEMO
I have a web page where there is a button, when the button is clicked a Textbox is added to a DIV. Here is a similar code that I'm working with:
HTML
<button class="addText">Add Textbox</button>
<div class="textCont">
</div>
JavaScript
$(document).on("click", ".addText", function() {
var textarea = $("<textarea/>", {class: "newText"});
$(".textCont").append(textarea);
});
$(document).one("focus", ".newText", function() {
alert("Great");
});
Fiddle: http://jsfiddle.net/ErRohitAgg/g3A7T/
What I'm trying to do is to show an alert for first focus of every textbox that is added. But, instead the focus event is executing only once, and not once for each Textbox.
Is there any way the event behaves according to the functionality I need??
Add the event handler to each textarea instead
$(document).on("click", ".addText", function() {
$("<textarea/>", {
'class': 'newText',
one : {
focus: function() {
alert("Great");
}
}
}).appendTo(".textCont");
});
FIDDLE
I would rather do it by adding newclass on first focus:
$(document).on("focus", ".newText", function() {
if(!$(this).hasClass('focused')){
$(this).addClass('focused')
alert("Great");
}});
Working Demo
Please help to adjust the code:
$('parent').click(function(){
$(this).html('<button> child <button/>');
$('button').click(function(){
$(this).parent().html('some new html');
});
});
I am trying to create the dynamic action conformation with jQuery. For example user clicks DELETE (parent). DELETE then is changed to YES / NO (child button). User clicks NO and parent html is becoming DELETE again.
You can try delegated event handlers like
$(document).on('click', '.delete', function () {
$(this).replaceWith($('<span />', {
html: '<button class="yes">Yes</button><button class="no">No</button>'
}))
})
$(document).on('click', '.no', function () {
$(this).parent().replaceWith($('<button />', {
text: 'Delete',
'class': 'delete'
}))
})
$(document).on('click', '.yes', function () {
console.log('delete')
})
Demo: Fiddle
You could create a new jQuery element and then append this, you can then assign the click handler to only that element.
JSFiddle
$('#parent').click(function(){
var yesBtn = $('<button type="button">Yes</button>');
var noBtn = $('<button type="button">No</button>');
$(this).html('');
$(this).append(yesBtn);
$(this).append(noBtn);
$(yesBtn).click(function(){
event.stopPropagation();
// On yes event handler
$(this).parent().html('You clicked Yes!');
});
$(noBtn).click(function(){
event.stopPropagation();
// On no event handler
$(this).parent().html('You clicked No!');
});
});
Not the event.stopPropagation(); in the child click handlers, this will stop the event bubbling up the DOM tree and re-executing the initial parent click.
Why can't you use the JavaScript confirm popup box? That way you don't need to edit the DOM at all and lives are made easier :).
$('parent').click(function(){
var blnDelete = confirm("Do you want to delete?");
if (blnDelete) {
// Delete
} else {
// Don't Delete
}
});
http://www.w3schools.com/jsref/met_win_confirm.asp
I'm binding a element with a click function when its added to the dom. My issue here is that if i add lets say 3 elements, and i click any of those it performs that function 3 times. what is it that makes it trigger those 3 times and could this be done any other way?
let me illustrate it with a jsfiddle demo here
html
<div id="breadcrumb">Start</div>
Add to breadcrumb​
jquery
$('#add_to_breadcrumb').on('click', function(){
$('#breadcrumb').append('' + $('#breadcrumb > a').size() + '', bindClick());
});
function bindClick(){
$(document).on('click', '.click-me', function(){
alert($(this).text());
});
}
Just try this:
$('#add_to_breadcrumb').on('click', function() {
$('#breadcrumb').append('' + $('#breadcrumb > a').size() + '');
});
$(document).on('click', '.click-me', function() {
alert($(this).text());
});
DEMO
Binding click event on each append, cause bind to each element again and again with each append.