This question already has answers here:
Event handler not working on dynamic content [duplicate]
(2 answers)
Closed 7 years ago.
I used the following codes to create a "New button" next to the "button". But, when I click the "New button", it cannot create another "New button". Why? I have defined the "click" event of "button" tag
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2jquery.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
$("body").append("<button type=button>New button</button>");
})
})
</script>
</head>
<body>
<button type="button">button</button>
</body>
Use event delegation for binding events automatically on dynamically added elements.
$(document).ready(function() {
var button = "<button type=button>New button</button>";
$(document).on('click', "button", function() {
$("body").append(button);
});
});
$(document).on('click', "button", function() {
$("body").append("<button type=button>New button</button>");
})
Related
This question already has answers here:
Direct vs. Delegated - jQuery .on()
(6 answers)
Closed 4 years ago.
I'm trying to add a data-name attribute on clicking one element and then when that element is clicked do something else.
$(".btn01").on("click", function() {
$(".next").attr("data-name", "btn02");
});
$("[data-name='btn02']").on("click", function() {
console.log("I clicked this button");
});
It is updating in the DOM but not working?
Any ideas?
You must use event delegation since the attribute you're using in the selector of the second click event [data-name='btn02'] is created dynamically by the JS code:
$(".btn01").on("click", function() {
$(".next").attr("data-name", "btn02");
});
$("body").on("click", "[data-name='btn02']", function() {
console.log("I clicked this button");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="btn01">CLICK ME then click the span bellow</button>
<br><br>
<span class="next">Next span</span>
Try the following, use event delegation for attaching event to "[data-name='btn02']", as $("[data-name='btn02']") element will not exist till $(".btn01") is clicked.
$(".btn01").on("click", function() {
$(".next").attr("data-name", "btn02");
});
$(document).on("click", "[data-name='btn02']", function() {
console.log("I clicked this button");
});
If you are just trying to make it so the first button needs to be clicked before the second can, you can just use a boolean variable for that:
var firstButtonClicked = false;
$(".btn01").on("click", function() {
firstButtonClicked = true;
});
// the second button
$(".next").on("click", function() {
if (firstButtonClicked == true) {
console.log("I clicked this button after the first one");
}
});
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
jQuery click event not working after adding class
(7 answers)
Closed 5 years ago.
I am trying to change the functionality of a button by changing its ID dynamically.
<srcipt>
$("#old-id").click(function func_P(){
//Some code
this.id = "new-id";
});
$("#new-id").click(function func_Q(){
// some other code
});
$("#clear").click(function func_R(){
$(".in").attr("id","new-id");
});
</script>
<body>
<button id="old-id" class="in">Button A</button>
<button id="clear">Clear</button>
</body>
But the problem I am facing is that when I click "Button A" the id gets changed but when I click "Button A" again func_P() is executed again instead I intend to call func_Q.
Use .on function to bind (live) click.
$("#old-id").on('click', function func_P(e) {
//Some code
if (this.id == "old-id") {
this.id = "new-id";
console.log('old id clicked');
e.stopPropagation()
}
});
$(document).on('click', "#new-id", function func_Q() {
// some other code
console.log('new id clicked');
});
$("#clear").on('click', function func_R() {
$(".in").attr("id", "old-id");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="old-id" class="in">Button A</button>
<button id="clear">Clear</button>
And if you want to clear id, you should change:
$(".in").attr("id","new-id");
To:
$(".in").attr("id", "old-id");
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 5 years ago.
I'm trying to use a button that is printed by .html(). I've tried .find() after searching through this site but the onclick event still seem not detected.
<div id = "div4html">div</div>
<button id="printbtn">printbtn</button>
<script>
$("#printbtn").on( "click", function() {
$("#div4html").html('<button id ="btntest">btntest</button>');
});
$("#div4html").find("#btntest").on( "click", function() {
alert("on click");
});
</script>
while the #btntest onclick doesn't show an alert, the CSS on #btntest works.
There is something I don't know about elements that are created dynamically?
You can't do this because js don't even for events in newly created content by default.
Here is the way to do it :
$("#div4html").on('click', "#btntest" , function() {
// Your code
}
You need to do:-$("#div4html").on( "click", "#btntest", function() {
It's called:- Event Delegation
Example:-
$("#printbtn").on( "click", function() {
$("#div4html").html('<button id ="btntest">btntest</button>');
});
$("#div4html").on( "click","#btntest", function() {
alert("on click");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = "div4html">div</div><br>
<button id="printbtn">printbtn</button>
Delegate the event from the body
$("body").on( "click",'#btntest', function() {
alert("on click");
});
This question already has answers here:
Bind event to right mouse click
(8 answers)
Closed 9 years ago.
I have created a table using jquery. I can highlight a row when it selected by left click. I used this code for this....
<script type='text/javascript'>
$(document).ready(function() {
$("#tableData").delegate("tr", "click", function() {
$(this).addClass("selected").siblings().removeClass("selected");
});
});
</script>
Now I want to select a row and change the color with rightclick also.. Please any one help me...
You can use the contextmenu event:
$("#tableData").delegate("tr", "contextmenu", function(e) {
alert('Context Menu event has fired!');
//Do functionality here
return false;
});
You can use which property of the event object:
<script type='text/javascript'>
$(document).ready(function() {
$("#tableData").delegate("tr", "mousedown", function(event) {
if(event.which == 3){
$(this).addClass("selected").siblings().removeClass("selected");
}
});
});
</script>
Here is an example: http://jsfiddle.net/Eknr6/
You already "selected" your row, you can retrieve the currently selected row with :
$('tr.selected')
To change color just change your css according to your selected class, here some examples :
tr.selected{
color:red;
}
tr.selected a{
color:black;
}
you might also want to add this into your script :
event.stopPropagation();
event.preventDefault();
If you have any event under that they won't trigger for your click event (the event won't bubble up or down)
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 9 years ago.
i am building a web app. the main navigation of this web app is refreshed with jquery but after the refresh the jquery event doesnt work.
the "on button" has a jquery event bound to it with .on and everytime it is clicked it will append a paragraph. the "reset button" adds another "on button" but the jquery event doesn't apply to it.
i have used the .on method to circumvent that the second "on button" isn't in the DOM when the document is ready.
here is a simple example:
example on jsFiddle
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>blub</title>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".reset").click(function() {
$("nav").append('<button class="on">test</button>');
})
var count = 0;
$(".on").on("click", function(){
$(".cont").append("<p>Another paragraph! "+(++count)+"</p>");
});
});
</script>
</head>
<body>
<button class="reset">reset</button>
<nav>
<button class="on">test</button>
</nav>
<div class="cont"></div>
<script>
</script>
</body>
</html>
.on isn't a direct replacement for .live, its syntax is slightly different. If you want it to affect elements added to the DOM later, you need to use it like this:
$(document).on('click', '.on', function(){
});
The problem is hot you use method "on" try this:
<script type="text/javascript">
$(document).ready(function() {
$(".reset").click(function() {
$("nav").append('<button class="on">test</button>');
})
var count = 0;
$(document).on("click",".on", function(){
$(".cont").append("<p>Another paragraph! "+(++count)+"</p>");
});
});
</script>
DEMO
You could also do it very simply this way -- this way the click handler gets assigned to each button as it is created.
$(document).ready(function() {
var count = 0;
$(".reset").click(function() {
$("nav").append($('<button>', {
class: 'on',
html: 'test',
click: function() {
$('.cont').append('<p>Another paragraph! ' + (++count) + '</p>');
}
}));
});
});