I'm trying to figure out how to iterate over the elements in one div on an onclick event inside the div without also iterating over another div with the same.
My Previous Javascript Method
$(document).on('click', '.ddSubmit', function() {
$("input[name*='ddText']").each(function() {
$("select[name*='ddFinal']").append('<option>'+$(this).val()+'</option>');
});
});
The problem in the previous example was that if I had input fields in separate divs it would iterate over every input field in all divs
My Current Javascript Method:
$(document).on('click', '.ddSubmit', function() {
$(this).next('.ddP').children('.ddText').each(function() {
$("select[name*='ddFinal']").append('<option>'+$(this).val()+'</option>');
});
});
This is the solution I came up with but it is not appending to the select element am I going about this the wrong way or is there something I'm missing
edit: Here's the fiddle I'm working on http://jsfiddle.net/me74Z/20/
Close with the first method, just use a preserved instance of this and you'll be all set:
$(document).on('click', '.ddSubmit', function() {
var that = this;
$("input[name*='ddText']", that).each(function() {
$("select[name*='ddFinal']", that).append('<option>'+this.value+'</option>');
});
});
Here is the solution I came up with to my question after working on it for a while
$(this).parent().find('>p.ddP>input[name="ddText"]').each(function() {
$("select[name*='ddFinal']").append('<option>'+$(this).val()+'</option>');
});
I went through the parent div in the debugger and traced the path to the input text elements
Related
For closing a modal with the class submitmodal i use this code and it works fine.
$('.submitmodal').click(function() {
window.location.hash='close';
});
For click on the body somewhere i use this:
$('body').click(function() {
window.location.hash='close';
});
How can i merge them together?
I tried this but it does not work
$('.submitmodal', 'body').click(function() {
window.location.hash='close';
});
Try
(".submitmodal, body").click(function() {
window.location.hash="close";
});
The selectors have to be in the same string, seperated by a comma.
Try this :
$(document).on("click",'body',function(){
window.location.hash='close';
})
This should do it
$('.submitmodal, body').click(function() {
window.location.hash = 'close';
});
You can use Multiple selector using first selector, second selector
$('body,.submitmodal').click(function() {
window.location.hash='close';
});
You can specify any number of selectors to combine into a single result. This multiple expression combinator is an efficient way to select disparate elements. The order of the DOM elements in the returned jQuery object may not be identical, as they will be in document order.
$("body, .submitmodal").click(function() {
window.location.hash="close";
});
For More help see this : multiple-selector
I hope it helps you :), Thanks.
This should solve your issue:
$('.submitmodal, body').click(function() {
window.location.hash='close';
});
But the problem I see is that when you click anywhere over the body you are closing your modal and that includes when you click over the element that opens itself. So I would suggest you to write something like that:
$('body, .submitmodal').click(function(e) {
if (e.target !== this) return; //prevents body's child elements from being affected
window.location.hash='close';
});
I've done some tests and apparently 'this' references to the first selector (body) which is fine for this situation.
I went through many post from SO but not able to relate with my scenario.
I have this code on button click. by which User can create as many div on runtime as he wants to on UI.
$('#adddiv').click(function () {
debugger;
$('#main').append('<div class="ara-dynamic-div">
<div class="box box-solid bg-light-blue-gradient">
</Div></div>');
});
code to get buttonclick event from that div
$(document).on('click', '#remove', function () {
showMakeAndHold(this);
});
function showMakeAndHold(obj) {
alert(obj);
$('.ara-dynamic-div').fadeOut();
}
Now the problem is that I have to create multiple dynamic div. and each div will have button to close itself. When I call this function it will close all created div's instead of the one which button is clicked.
I am not able to find the proper div by which request for close come. I am new to DOM and JQuery. not able to relate the things
First of all, if you're using multiple divs you shouldn't give the close button an ID, but a class instead (let's say, .close)
Next you can use event delegation to find the correct element:
$(document).on('click', '.ara-dynamic-div .close', function( event ) {
$(this).closest('.ara-dynamic-div').fadeOut();
} )
The delegator handles all click events in any .ara-dynamic-div .close button, catching them all and allowing you to use $(this).closest(...) to get to the parent container.
Edit: Corrected a mistake
You can use jQuery's .closest() function.
function showMakeAndHold(obj) {
alert(obj);
$(obj).closest('.ara-dynamic-div').fadeOut();
}
JSFiddle
Replace this:
$(document).on('click', '#remove', function () {
showMakeAndHold(this);
});
by this:
$(document).on('click', '#remove', function () {
$(".ara-dynamic-div").not($(this).parents(".ara-dynamic-div")).fadeOut(function () {
$(this).remove();
});
});
Here is the JSFiddle demo
What the code does is that it remove all other .ara-dynamic-div except the one for which the button was clicked.
I want to check if a child-element of a clicked div has a certain class.
So i do this:
$('.panel').on('click', function (event) { if($(".panel input").hasClass('h5_validator_error')) { event.stopPropagation(); } });
The problem: I have more then one .panel class. Since my whole site gets generated by the user and json-files, i need a dynamic environment without ids.
So, actually my if-statement is preventing all .panel-clicks from doing their job.
I want to do something like this:
if($(event.target + ".panel input").hasClass('h5_validator_error')) { event.stopPropagation(); }
So i want to select all input - elements from the clicked div without
having an array and loop through it.
Is this possible? Or what is the most efficient way of selecting child-elements of the clicked one?
You should rather use this to get the targeted element:
$(this).find("input").hasClass('h5_validator_error');
or
$('input',this).hasClass('h5_validator_error');
You shoud make the dom object $(event.target) and then apply the jquery method on it.
Try this:
$('.panel').on('click', function (event) {
if($(event.target).find('input').hasClass('h5_validator_error')){
alert('true');
}
else{
alert('false');
}
});
Working Example
This is what I am trying to do, close the notification bar if the x inside it is clicked.
Here is my code: http://jsfiddle.net/spadez/qK3yK/2/
$('#closeButton').on('click', function(e) {
$('#previewBox').remove();
});
How can I make it so it only closes the warning with which it is associated with, instead of removing all of them though. I'm sure the word "this" is needed in the code, but I can't understand where.
Use jquery .parent() to get the parent of each element in the current set of matched elements, optionally filtered by a selector. Try this:
$('#close').on('click', function(e) {
$(this).parent('.alert').remove();
});
DEMO
$("#closeButton").on('click', function() {
$(this).parent().remove();
});
this will remove prev elemement.
Try this. You have to get it is parent not that element itself
$('#closeButton').on('click', function(e) {
$(this).parent('.alert').remove();
});
Or
$('#closeButton').on('click', function(e) {
$(this).parent().remove();
});
This will remove closest parent
What i assume is that you are trying to remove the parent of the 'x'.
On clicking on x . The parent div should be removed.
Make these changes in your JS file
$('#closeButton').on('click', function(e) {
var par = $(e.target).parent();
$('par').remove();
});
I've written up this code to add a class (.box-open which adds display:block) to my box (.sharebox) when a button (#share-but) is clicked but the problem is I'm having trouble making this only apply to one .share div at a time because everytime I click a button, all the .shareboxs get the class .box-open applied to it.
function shareBox() {
$('.share').each(function( index ) {
$(this).on('click', '#share-but', function() {
if ($('.sharebox').hasClass('box-open')) {
$('.sharebox').removeClass('box-open');
}
else {
$('.sharebox').addClass('box-open');
}
});
});
}
shareBox();
Here is an image of the problem (I'm building a Tumblr Theme). Hopefully it's a lot easier to understand. http://24.media.tumblr.com/c5c4252607bf4a9905c7c9de5b592c60/tumblr_ml4t2fSuQo1rqce8co1_500.png <---- This happened when I clicked one of the buttons, but I only want one .sharebox to have the class .box-open added to it when I click the #share-but inside the same .share div.
I hope all of this made sense. I'm still very noob at Javascript/Jquery as I only started learning like 2 weeks ago so any help is much appreciated!
You have to use $(this) instead of $('.sharebox') to address source of event
$('.sharebox').addClass('box-open');
Would be
$(this).addClass('box-open');
The id of element is supposed to be unique in document so you can bind click directly to '#share-but', if it is not unique you can bind it like this.
$('.share').on('click', '#share-but', function() {
if ($('.sharebox').hasClass('box-open')) {
$('.sharebox').removeClass('box-open');
}
else {
$('.sharebox').addClass('box-open');
}
});
You can use toggleClass to make it simple, I assume you have single item with id #share-but,
$('#share-but').click(function(){
$(this).toggleClass("box-open");
});
This would be a simpler version, you can toggle the classname :)
$('.share').on("click", "#share-but", function() {
$(this).find(".sharebox").toggleClass('box-open');
});