I have a form that creates a div when you enter a name and click "add". I want to wrap this div in an li but when I do this it wraps every created div with the same class name in an li therefore I end up with multiple levels of li's around the div. Is there a way to only target the div that is created on that click?
The fiddle is here
http://jsfiddle.net/clintongreen/BMX4J/1/
Here's an updated fiddle. All I've done is moved the creation of the new div outside of the call to append, and stored it in a variable so it can be reused. The relevant code from the fiddle:
var newDiv = $('<div class="div_menu_button"></div>');
$('#created_buttons').append(newDiv.val(value).text(value) );
newDiv.wrap("<li></li>");
Related
Above I have three banner elements that I want to mark as unread if they are clicked. I structured each banner so that they have a span element within a nested div as shown with the image below (the red dot comes from the span element):
My javascript for this function is the following code:
I am trying to add a class ".read-dot" to the ".dot" span element that will hide it. I would like to add this class to the ".dot" span element that is inside the div that the user would click on. Any help would be appreciated.
I tried accessing the this.$(".dot) to access the dot element of the current object that triggered the event, but I now see this syntax is incorrect. I am new to jQuery which is why I tried this; I also could not find the page most relevant to my question on the API doc.
First, you have to remove click accessibility for the child.
$('div.banner > *').css('pointer-events', 'none');
And then, you can use the jquery selector for the .unread class to remove the class and replace .dot with .read-dot
$('.unread').click((e) => {
let clickedElm = e.target;
clickedElm.classList.remove('unread');
clickedElm.querySelector('span').classList.remove('dot');
clickedElm.querySelector('span').classList.add('read-dot');
})
Thank you in advance for looking at this.
My webapp allows a user to select choices from four different drop-down menus. When the user makes a selection, the program successfully performs the following click() function which creates a new span element within a div element:
var activeFilterNames = [];
$('.filter').click(function()
{
if (!this.classList.contains('disabled'))
{
//above checks to see if link has already been clicked
//and is therefore disabled. If not, go ahead.
activeFilterNames.push(this.textContent);
//above adds name of selected link to array
i = activeFilterNames.length;
var newFilter = document.createElement('span');
newFilter.id = activeFilterNames[i-1];
newFilter.className = this.className+" activated";
//above adds a new class to identify the filter as 'activated'
//above retains existing classname to identify
//which of the four filters it came from
newFilter.innerHTML = activeFilterNames[i-1];
//above creates display text to be rendered in browser
document.getElementById('active_filters').appendChild(newFilter);
//above is the div in which span will be appended to other spans.
$("#active_filters > span").removeClass('filter');
//above removes .filter class so that this newly created span does
//not respond to the .filter click() function.
$(this).addClass('disabled');
//above adds 'disabled' class to the originally
//clicked link, causing it to skip this block of code
}
}
);
Everything appears to work fine up to this point (though I may be missing something). Essentially I am creating span elements that come out looking like this in html:
<span id="id_name" class="menu_name activated">Rendered Name</span>
And since the above span does not have the filter class, I then try to create a new function in javascript (just as a test) to make the element responsive:
$('.activated').click(function()
{
alert('hi');
}
);
But no luck. I've tried to re-render the dynamically created elements by nesting div or a inside the span, modifying the code as needed, but still nothing. I would like to keep the span because it's the only way I've found to wrap these dynamically generated elements to a second line within the div (#active_filters) where they are being created.
Can anyone see what I'm doing wrong given that I want to make the activated click() function responsive within each newly created span element?
Your binding will not work if you attempt to bind to DOM elements contained in $('.activated') before creating them. What this usually means is that you need that event listener to bind after creating. If you're dynamically creating DOM elements, you need to do something like this:
var activeFilterNames = [];
$('.filter').click(function()
{
if (!this.classList.contains('disabled'))
{
activeFilterNames.push(this.textContent);
i = activeFilterNames.length;
var newFilter = document.createElement('span');
newFilter.id = activeFilterNames[i-1];
newFilter.className = this.className+" activated";
newFilter.innerHTML = activeFilterNames[i-1];
document.getElementById('active_filters').appendChild(newFilter);
$('.activated').unbind('click');
$('.activated').click(function()
{
alert('hi');
}
);
$("#active_filters > span").removeClass('filter');
$(this).addClass('disabled');
}
}
);
Notice, before binding we unbind. This makes sure that if you do this multiple times, you aren't binding 2, 3, 4 times to the same DOM element.
You need to attach click event on dynamically created elements. In jQuery this can be done using on method if you will pass your selector as second argument and attach click to some parent element, body for example:
$( 'body' ).on( 'click', '.activated', function()
{
alert('hi');
}
);
I am cloning a div (with an h3, a paragraph, and a clickable tag line) on the click of the tag line and appending the div to my sidebar. There is several divs with this same structure and when a div has already been cloned I want to make sure that that div is not cloned a second time. To accomplish this I am trying to match the H3 text of the div whose tag line was clicked with the H3 text of divs that have already been cloned. If there is a match, I pop up an alert message and don't append the cloned div to the side bar.
Here is the code i have:
$(this).click(function(){ // where $(this) is the tag line
var clone = $(this).parents('.full_result').clone(); // on the click of the tag line, find the parent whose class is .full_result and clones it (.full_result is the class of all divs)
var jobsH3 = $(this).parents('.full_result').find('h3').text(); // returns the text of the H3 that is contained in the same div as the clicked tag line
var middleColumnInnerDiv=$('#middle_column').find('.full_result').find('h3').text(); // returns the text of all h3 whose divs have been cloned to the side bar(sidebar id= #middle_column)
//below is where the magic should happen, but i cannot make it work. Tried several selectors and methods. The :contains is but one of them.
$(this).parents('.full_result').find('h3').each(function(){
if('middleColumnInnerDiv:contains(jobsH3)'){ // this line is giving me a headache
alert('You already saved this information');
} else {
clone.appendTo('#middle_column').hide().fadeIn(750);
}
});
};
Any help is much appreciated!
you are missing $ Jquery notation. try this $("middleColumnInnerDiv:contains('.jobsH3')")
<button onclick="insert()">Click to insert</button>
<hr id="start">
<hr id="end">
I wrote a javascript function that inserts a div between two horizontal rules:
<script type="text/javascript">
var element = document.createElement("div");
var element_content = document.createTextNode("This is a newly added row!");
element.appendChild(element_content);
var sibling = document.getElementById("end")
var parent = document.getElementById("start").parentNode;
function insert(){
parent.insertBefore(element,sibling);
}
</script>
However when I click the button for the second time, no divs are inserted. I had to include all the variable assignments inside the function in order to click on the button for the 2nd time have the div inserted:
<script type="text/javascript">
function insert(){
var element = document.createElement("div");
var element_content = document.createTextNode("This is a newly added row!");
element.appendChild(element_content);
var sibling = document.getElementById("end")
var parent = document.getElementById("start").parentNode;
parent.insertBefore(element,sibling);
}
</script>
Can someone explain why my first approach didn't allow a 2nd div to be inserted after clicking the button?
In the first example you create one element, since you define it outside of the function. The first time the function is called, that element is appended to the DOM and it won't be appended again (it actually gets removed and appended again, but in the same place):
If the node already exists it is removed from current parent node,
then added to new parent node.
See appendChild on MDN.
The second example creates a new element every time you call the function, and appends that new element to the DOM.
Of course! If you keep the element outside of the function, only 1 new div is created and you are inserting the same div over and over. When a div is inserted in a new location, it is removed from it's old location (if any).
Your second method creates new divs every time the button is clicked.
Because you're only creating a div once and then inserting it when you click the button. You never create a second div, so how can you expect one to magically appear out of nowhere?
The second function works because it creates the div when you click the button, then inserts it. Here you create one div for every click, so it works.
in your first approach, the variables you declare outside the function are created before the click is triggered, therefore they will exist always in the same state independently of what you click.
The first approach only creates the div once and inserts it in the DOM. Calling the function twice doesn't create the div again like the second method does. You could probably take the:
var sibling = document.getElementById("end")
var parent = document.getElementById("start").parentNode;
out of the function though.
The Script is syntactically correct and does what you tell it to do. You're inserting the same node to the same position, which results in... nothing.
Try cloning the node:
function insert(){
parent.insertBefore(element.cloneNode(true), sibling);
}
I am building a block of nested divs around a specific element on the client. I am using jQuery's .wrap() initially to get the first part of the block which is working fine. But now I want to attach the ending block after the element I am wrapping and I am finding I can't attach it to anything because it is all being created at the same time. I tried using insertAfter() but I don't want it to be a sibling of the element I am wrapping, I want it to come after it's parent.
Here is my code:
$(document).ready(function() {
buildShadows('#section');
});
function buildShadows(element){
$(element).wrap("<div class='section_shadow_wrapper'><div class='section_shadow_curve'><div class='section_shadow_outer'><div class='section_shadow_inner_left'><div class='section_shadow_inner_right'>");
$("<div class='section_shadow_bottom_left'><div class='section_test_bottom_right'>").insertAfter(element);
}
What I am trying to do is append the first element of the second part (section_shadow_bottom_left) as a sibling of 'section_shadow_inner_right' but after 'element'
Any help would be appreciated.
Thanks.
You should be able to just traverse up to the new parent you just created.
Have you tried this?
function buildShadows(element){
$(element).wrap('<div class="section_shadow_wrapper clearfix"><div class="section_shadow_curve"><div class="section_shadow_outer"><div class="section_shadow_inner_left"><div class="section_shadow_inner_right">')
.parent().after('<div class="section_shadow_bottom_left"><div class="section_test_bottom_right">');
}
Try traversing to the next sibling of the original element and using .insertBefore() on it.
var nextsibling = $(element).next();
//Wrap code
$("<div class='section_shadow_bottom_left'><div class='section_test_bottom_right'>").insertBefore(nextsibling);