We Keep Coding

ajax reload is making problems with adding events [duplicate]

This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 10 months ago.
I have problem with following code. I have a div with id reloadDiv that is refreshing every 3 seconds using ajax. Content of the div is loaded using php, there is more content in this div but I didn't added it here.
Div is reloading normally. The problem is with input type button event with class replyComment, there are multiple buttons with this class here. When I add click event the event is working until first reload, as soon as div reloads event is not working any more.
Does someone know how to solve this problem?
<div id="reloadDiv">
<?php foreach($comments as $c):?>
<input type="button" value="Reply" class="replyComment" />
<?php endforeach?>
</div>
js:
setInterval(function(){
$("#reloadDiv").load(location.href + " #replyComment");
}, 3000);
$('.replyComment').click(function(){
console.log("smth")
});

That happens because content is replaced, and the element with the event doesn't exists anymore, as well the event.
Try this:
$('#reloadDiv').on('click', '.replyComment', function() {
With that, the event is bound to the parent element and will work no matter how many times the content is recreated.

Want to fire trigger click event with only JavaScript [duplicate]

This question already has answers here:
How can I trigger a JavaScript event click
(9 answers)
Closed 2 years ago.
I want to fire an trigger click event with JavaScript. I did it with jQuery like this:
$('button[type="submit"]').trigger('click'):
I want the same with JavaScript.

You can use
document.getElementById('buttonID').click();
in vanilla JS

function callClick() {
document.querySelector('button[type="submit"]').click();
}
<button type="submit" onmouseover="callClick();" onclick="alert('Click called!')">Submit</button>
This should do the trick:
document.querySelector('button[type="submit"]').click();

you can use click . The HTMLElement.click() method simulates a mouse click on an element.When click() is used with supported elements (such as an <input>), it fires the element's click event. This event then bubbles up to elements higher in the document tree (or event chain) and fires their click events.
Syntax
setTimeout(function(){
let submit =document.getElementById('submit');
submit.click();
},2000)
function submited(){
alert('submitted');
}
<form onsubmit="submited()">
<input type="text">
<input type="submit" id="submit">
</form>

Mousedown event triggers only on right click [duplicate]

This question already has answers here:
How to distinguish between left and right mouse click with jQuery
(20 answers)
Closed 3 years ago.
Why does:
$(document).on('mousedown', '.noUi-handle', function() {
$(this).find('.noUi-tooltip').show();
});
Only trigger when I right-click .noUi-handle ?
I want it to trigger only on left-click.

Use click event instead of mousedown.
$(document).on('click', '.noUi-handle', function() {
$(this).find('.noUi-tooltip').show();
});

Enforce event propagation [duplicate]

This question already has answers here:
mousedown. propagation on siblings event.targets
(3 answers)
Closed 3 years ago.
fiddle
when I click on the respective "Click me!" buttons only one console.log (click event) is fired.
Why is the propagation stopped here? The click should to through "Click me!" into the button underneeth with the ".......".
<button style="position: absolute" onclick="onClick()">Click me!</button>
<button style="height: 4em" onclick="onClick()">...............................................</button>
On the web everyone whats to stopPropagation, but I want to enforce it!
The desired outcome is to get two events firing from a single click.

Events propagate to parent elements, not sibling elements, so event propagation won't help you here. (The fact that you've changed the layout to make it look like the buttons are nested doesn't affect this.) If you need to trigger both events you'll need to do it manually, or actually nest the elements (changing the parent to something other than a <button>, because they can't be nested):
onClick = function() {
console.log("onclick triggered");
}
<div style="height: 4em; border: 1px solid;" onclick="onClick()">
<button onclick="onClick()">Click me!</button>
...............................................
</div>

Stop click from working on inner elements [duplicate]

This question already has answers here:
How to have click event ONLY fire on parent DIV, not children?
(12 answers)
Closed 10 years ago.
I have a div that covers the screen. Within the div is another div and within that, an image get dynamically placed. When the user clicks on the outer div it closes, and that is fine. When the user clicks on the image or the inner div it closes as well, how can I stop that from happening? I only want it to close if they click on the outer div.
This is what I am using; what do I need to do to make this work?
$("#black-out").click(function(){
$(this).fadeOut("slow");
});
The HTML:
<div id="black-out"><div id="image-holder"></div></div>

Check if the clicked element is the same as the one the event was bound to :
$("#black-out").click(function(e){
if (e.target == this) $(this).fadeOut("slow");
});