Detect button click with javascript using parent class and no ID - javascript

I'm trying to simply detect the click of an html tag. It only works if the button has an ID, but my button has no id or class.
html
<div class="parent">
<button>Submit</button>
</div>
JS
document.getElementByClassName('.parent button').onclick = function() {
alert("clicked");
};

Use this, document.querySelector works just like css selectors.
document.querySelector('.parent button').onclick = function() {
alert("clicked");
};

You could use .querySelector() with addEventListener :
document.querySelector('.parent button').addEventListener('click', function()
{
alert("clicked");
});

<div class="parent">
<button>Submit</button>
</div>
document.querySelector('.parent > button').addEventListener('click', function() {
alert('Clicked!');
});

you are using getElementByClassName and giving it a Css Selector string.
therefore it returns null, as there is no element with class ".parent button"
Use querySelector instead,
document.querySelector('.parent button').onclick = function() {
alert("clicked");
};

Related

jquery on event for a dynamically generated child of a dynamically generated child

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.

Jquery .remove event only on parent not child

<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/

How to bind click event to element hasn't specific child using jquery?

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();
});

How to add a class to a div created inside a contenteditable element?

Here is the example code:
<div>
Text..
<div id="editable-editor" contenteditable="true">Some Text Here...</div>
</div>
If press enter inside the #editable-editor after Some Text it will create a <div>Here...</div> element for the text Here.
How do I add the jquery-ui draggable class to the <div>Here...</div> element to make it dragabble?
You'll want to reference this SO answer. Essentially, there is no cross-browser guaranteed way to know when someone has added new content to your contenteditable element. You can guess, however.
$("#editable-editor").keydown(function () {
$(this).children('div').each(function () {
$(this).draggable();
});
});
Simply listen for key events and add draggable to your new divs.
please try this
$('div', '#editable-editor').each(function (i) {
$(this).addClass('ui-widget-content');
$(this).draggable();
});
Try using keypress , change events , .has() , .not()
$("#editable-editor")
.on({
"keypress": function(e) {
if (e.keyCode === 13) {
$(this).append("<div>Here...</div>")
.change()
}
},
"change": function() {
if ($(this).has("div")) {
$("div", this).not(".ui-draggable").draggable()
}
}
})
.draggable {
color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<div>
Text..
<div id="editable-editor" contenteditable="true">Some Text
</div>
</div>

jQuery function does not work on appended html

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

Categories