This question already has answers here:
jQuery Event : Detect changes to the html/text of a div
(13 answers)
Closed 7 years ago.
I want to call a function whenever the content in a particular DIV changes.
For example:
I have a div. This div displays some data on page load. On another button click, there is some more data displayed in the same div. When data in the div increases, I want to call another function.
Any ideas?
On another button click, there is some more data displayed in the same
div.
On click of that button, check for the content of the DIV. If the content has increased then call your function.
var divContent = $("div#target").text();
$("button").click(function() {
if(divContent !== $("div#target").text()) { // you can even check for length also
divContent = $("div#target").text();
// call your function here
}
});
Related
This question already has answers here:
addeventlistener not working, event not waiting for on click
(2 answers)
Closed 2 years ago.
function hide(c1) {
document.getElementById(c1).style.display = "none";
}
document.getElementById("red-circle").onclick = hide("red-circle");
When the page loads, the red circle is automatically hidden. I am trying to understand how to define the "hide" function to call it later while passing the name of the item to be hidden.
It's because in the code you posted, you are trying to set the onclick event to the return value of the hide function, instead of the hide function itself. Try this:
function hide(c1) {
document.getElementById(c1).style.display = "none";
}
document.getElementById("red-circle").onclick = function(){
hide("red-circle");
};
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 3 years ago.
I have a PHP snippet in a separate file which I am loading in a javascript file using jquery:
let signUpMode = $(".modal");
signUpMode.load("login_signup_popup.php");
This works because I am able to show this on screen. However, this snippet contains a button which I would like to click in the same javascript file where I loaded the snippet. something simple like:
$(".signupbtn").on("click", function(){
console.log("signed Up");
});
This click is, however, not working. signupbtn is a div element in the snippet. Somehow I am missing an extra step since jquery seems to not be recognizing the elements in the snippet.
Lazy loaded elements are not recognized from eventhandlers which are already initialized. So you have to set the event on a parent. This should work:
$(document).on('click', '.signupbtn', function(){
console.log("signed Up");
});
https://api.jquery.com/load/
You could use the complete function to check if it has loaded, or you could just put the button function inside there.
let signUpMode = $(".modal");
signUpMode.load("login_signup_popup.php", function() {
$(".signupbtn").on("click", function() {
console.log("signed Up");
});
});
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 3 years ago.
I've got a button on my page that allows a user to add a form. When a button within the new form is clicked, a jquery function should run. Unfortunately, the jquery function doesn't seem to run on the newly appended divs (it does run divs that existed on initial page load).
<div id="empty_form" style="display:none">
<!-- Form Contents -->
<div class="deletebox">
Remove
</div>
</div>
<div id='add_more'>
Add Another Form
</div>
<script>
$('#add_more').click(function() {
var form_idx = $('#id_form-TOTAL_FORMS').val();
$('#form_set').append($('#empty_form').html().replace(/__prefix__/g, form_idx));
});
</script>
<script>
$(".deletebox").click(function () {
console.log('box was clicked')
});
</script>
When the user clicks the deletebox within the newly appended form, nothing happens. I.e. jquery doesn't register that it was clicked and no message is printed to the console. Do you know how this issue can be addressed?
Thanks!
I needed to use
$(document).on('click', '.deletebox', function() {
rather than
$(".deletebox").click(function () {
New button added after DOM loaded, so it is not registered in DOM and not getting click.
Use below code for dynamic element click.
$(document).on('click','.deletebox',function () {
console.log('box was clicked')
});
This question already has answers here:
How do I attach events to dynamic HTML elements with jQuery? [duplicate]
(8 answers)
adding jQuery click events to dynamically added content
(4 answers)
Closed 8 years ago.
I have a page with an empty div and when the user clicks on a button, a jQuery function is executed and loads some content. The problem I have is that I can't access the elements inside the div.
For example, if a link is loaded, if I have a function that executes when a link is clicked, it has no effect since the link is loaded content.
EDIT: an example code of how I load content.
$('#all').click(function(e){
e.preventDefault();
all = true;
$.ajax({
type: 'POST',
url: './?ajax=cars',
data : {all : true},
success: function(data){
$('#ajaxTable').html(data);
}
});
});
Replace:
$('#all').click(function(e){ /* code here */ });
With:
$(document).on('click', '#all', function(e){ /* code here */ });
The #all element is created after the click event is assigned so it won't apply to a new #all element. Using $(document).on() any #all contained inside the document regardless of load time will observe the event.
This question already has answers here:
In jQuery, how can I tell between a programmatic and user click?
(7 answers)
Closed 8 years ago.
In javascript/jquery, I have a button that have a click event defined like:
$("#target").click(function() {
var mouse_click = ________________;
// do stuff
if (mouse_click) {
// do stuff
}
// do stuff
});
and I also have code to do
$('#target').click();
How can I get the variable mouse_click to be true, if the user manually clicked the tag using the mouse, and the variable to be false when I click the tag using the .click() function?
Thanks
You could use this:
$("#target").click(function(e) {
var mouse_click = !(e.originalEvent === undefined);
// do stuff
if (mouse_click) {
// do stuff
}
// do stuff
});
or you could check e.isTrigger which is set whenever an event is triggered within jQuery. You'd just need to change the second line to:
var mouse_click = !e.isTrigger;
Both will work but you might prefer the second option as it's a little more concise.
Here it is working: http://jsfiddle.net/2U3Us/4/