I want to append a div with jQuery and then use jQuery click function on a class which is inside the appended div. Here's my code, it does not work if I append the div, however it works fine if the div already exists in the html.
HTML:
<div class="add">
Add item
</div>
<div class="container">
</div>
jQuery:
$('.add').click(function(e){
e.preventDefault();
var box = '<div class="box"><div class="remove">x</div></div>'
$('.container').append(box)
});
$('.remove').click(function(){
alert("remove");
});
Demo:
http://jsfiddle.net/Y625A/
Use event delegation
$('.container').on('click','.remove',function(){
alert("remove");
});
Demo --> http://jsfiddle.net/Y625A/2/
http://api.jquery.com/on/
http://learn.jquery.com/events/event-delegation/
Try using live to bind the events, this will bind them when the new items are created:
$('.add').live('click', function(e){
});
You have to bind the click even once you create the element:
$('.add').click(function(e){
e.preventDefault();
var box = "<div class='box'><div class='remove'>x</div></div>"
$('.container').append(box)
$('.remove').click(function(){
alert("remove");
});
});
http://jsbin.com/ofoteq/1/edit
Related
I am trying to click a button but the only thing that defines it is multiple classes. The element I want to click is
<div class="U26fgb XHsn7e obPDgb M9Bg4d">This is a button </div>
How would I go about clicking it using Javascript?
As long as it is the only <div> element with that class combination, you'd use .querySelector(), which accepts any valid CSS selector as an argument so you can select elements in JavaScript the same way you would in CSS:
// Scan the document for the <div> that has the required classes
let theDiv = document.querySelector("div.U26fgb.XHsn7e.obPDgb.M9Bg4d");
// Set up a click event handling function
theDiv.addEventListener("click", function(){
console.log("you clicked me");
});
// Trigger the click event of the <div>
theDiv.click();
<div class="U26fgb XHsn7e obPDgb M9Bg4d">Click Me</div>
FYI: You should get out of the habit of putting spaces on the insides of the < and > delimiters in HTML. Use this:
<div class="U26fgb XHsn7e obPDgb M9Bg4d">Click Me</div>
Not this:
< div class="U26fgb XHsn7e obPDgb M9Bg4d" >Click Me< /div >
very simple with jQuery:
$(".U26fgb.XHsn7e.obPDgb.M9Bg4d").click(function(){
console.log("clicked!");
});
const div = document.querySelector('div .M9Bg4d');
div.addEventListener("click", ()=> {
// here put what you wanna do after clicking the div.
});
onclick attribute works well inside almost all the html tags and here is the simple solution to click on the div and get a result. All the Best!
function clickDiv(){
console.log("Div is Clicked");
}
<div class="U26fgb XHsn7e obPDgb M9Bg4d" onclick="clickDiv()">This is a button </div>
I have a div that gets added to dynamically and I would like to have a mouseenter event for images that have been dynamically added in another tag. The div that is getting added to looks like this before hand:
<div class="chat_box">
</div>
and looks like this after content has been added:
<div class="chat_box">
<p class="chat">text here <img class="emote" src="emote.png"> more text</p>
</div>
I would like to have a mouseenter event for the image with the class of emote, but I cannot get it to work.
I have tried the following:
$('.chat_box').on('mouseenter', '.chat', function(){
alert();
});
and it works, but if I try to use the child selector
$('.chat_box').on('mouseenter', '.chat > .emote', function(){
alert();
});
and
$('.chat_box').on('mouseenter', '.chat > img', function(){
alert();
});
it doesn't work.
This was previously provided by .live(), but that function has been merged into .on() ... it creates an event watcher.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="chat_box"></div>
<button>Add</button>
<script>
$('button').click(function(){
$('<div class="chat"><img width=10 height=10 class="emote"></div>').appendTo('.chat_box');
});
$('.chat_box').on('mouseenter', 'img.emote', function(){ alert('test'); });
</script>
Just target the parent object and have it watch for the expected child.
I am trying to implement onClick function for a div which is getting generated depending on some validations while submitting the page. I am trying to implement the same from an external js file.
HTML design is something like :
<div id="QViewInfo" style="top: 207px; left: 531.5px;">
//dynamically generated
<div>
---
----
</div>
</div>
Now, I am trying to implement the onClick function like below :
$('img.popUpClose.popUpCloseQview').each(function (index) {
$(this).on("click", function (e) {
//DO something
});
});
But the issue is, this $('img.popUpClose.popUpCloseQview') element is not there in the code on the first time. After the submit button click valiations are happening and depending on the condition this pop up message is coming up and this function is not working anytime.
Tried some other options too. But none of these are working.
Please advise.
Thanks,
Aniket
If you are dynamically generating the div in jquery, you can add the click event then. For example:
var div = $("<div>");
div.click(function(){//dostuff});
$("#QViewInfo").append(div);
You could attach the click event to all the div's of element #QViewInfo using event delegation on() like :
$('#QViewInfo').on('click', 'div', function(){
//DO something
})
NOTE : No need for using each() loop.
Hope this helps.
$('#QViewInfo').append('<div>Div 3</div>');
$('#QViewInfo').on('click', 'div', function(){
console.log($(this).text());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="QViewInfo" style="top: 207px; left: 531.5px;">
<div>Div 1</div>
<div>Div 2</div>
</div>
Working snippet with comment code :
var img = '<img src="/Images/...." onclick="alert(\'QView.close();\')" alt="Close Quick View" class="popUpClose popUpCloseQview">';
$('.oosInfo').append(img);
$('#QViewInfo').on('click', 'img.popUpClose.popUpCloseQview', function(){
alert("A");
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="QViewInfo">
<div class="oosInfo">
<div class="alertImgDiv">
<span class="oosAlertImg"></span>
</div>
</div>
</div>
<script>
$(".alert").click(function(){
$(this).fadeOut(300, function(){
$(this).remove();
});
});
</script>
<div class="alert alert-error">
<h4>title</h4>
<textarea class="pull-right">text...</textarea>
</div>
So the above code works perfectly except that I need to make it so that a user can select the text inside the textarea. At this moment logically when they click the textarea, as its contained by .alert, it instantly gets removed with the div.
I can't remove the textarea from the div as I need it both contained by the div, and removed when other parts of the div are clicked.
So how can I specifically exclude the textarea from the click event of its containing div while still allowing the click event from the containing div to remove the textarea.
You can do this by preventing the click event from propagating (bubbling) from the textarea to the div:
$(".alert textarea").on("click", function(e) {
e.stopPropgation();
});
Example:
$(".alert").click(function(){
$(this).fadeOut(300, function(){
$(this).remove();
});
});
$(".alert textarea").on("click", function(e) {
e.stopPropagation();
});
<div class="alert alert-error">
<h4>title</h4>
<textarea class="pull-right">text...</textarea>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Alternately, in your existing handler, check to see if the event passed through the textarea:
$(".alert").click(function(e){
if (!$(e.target).closest("textarea").length) {
$(this).fadeOut(300, function(){
$(this).remove();
});
}
});
Example:
$(".alert").click(function(e){
if (!$(e.target).closest("textarea").length) {
$(this).fadeOut(300, function(){
$(this).remove();
});
}
});
<div class="alert alert-error">
<h4>title</h4>
<textarea class="pull-right">text...</textarea>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Note that that second one relies on the fact that your .alert element can never be inside another textarea, because of the nature of the elements. It won't work in the general case. This would, but it's a pain:
$(".alert").click(function(e){
var $t = $(e.target);
if (!$t.is("textarea") && !$t.parentsUntil(this, "textarea").length) {
$(this).fadeOut(300, function(){
$(this).remove();
});
}
});
you can also use the not selector to do this :
<script>
$(".alert *:not(textarea)").click(function(){
$(this).fadeOut(300, function(){
$(this).parent().remove();
});
});
</script>
<div class="alert alert-error">
<h4>title</h4>
<textarea class="pull-right">text...</textarea>
</div>
see this fiddle: https://jsfiddle.net/zLq6dztu/
I have several elements on a page like bottom code.
<div>
click
some content
</div>
They can be clicked and jQuery picks that click. However one of the elements has a a link that is clicked should not be picked as a click of the parent element.
$('div:not(#notme)').on('click', function(e) {
// do something
});
Doesn't seem to work for some reason...
Use :has selector to selecting div element has specific child. In :has use :not.
$("div:has(a:not(#notme))").on("click", function(e) {
console.log("clicked");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
click
some content
</div>
<div>
<a href="#" >click2</a>
some content 2
</div>
You may try:
$('div').on('click', function(e) {
if($(e.target).attr("id") !== "notme") {
// do something
}
});
$('#notme').on('click', function(e) {
e.stopPropagation();
});