Develop Reference

JS/JQUERY How to give priority to a button click in the same DIV

My whole div is clickable and will change the page. However, inside my div, I have an element that is also clickable, but it should be prioritized sincee it stays on the page.
Basicly, i'm working on a webshop. clicking on a div will go to a new page with the requested data. However, the div includes a clickable image that adds the item to the wishlist.
In the code below, child refers to my whole clickable div, whereas my wishElement is the clickable image to refer to my wishlist.
$('#' + wishElement).click(function() {
window.location.href = "http://website.com/index.php?wish=" + child;
});
$('#' + child).click(function(){
window.location = "http://website.com/item.php?item=" + child + '&name=' + itemname + '&link=' + link;
});

Use event.stopPropagation(); to stop your child event from bubbling up:
$('#' + child).click(function(ev){
ev.stopPropagation();
window.location = "http://website.com/item.php?item=" + child + '&name=' + itemname + '&link=' + link;
});

My problem has been solved by the post coded above, however, the
ev.stopPropagation();
has to be inside my wishElement in order to work.
So thanks for the help!

Remove li from ul with jquery from href

I want to remove all <li> row but instead I removing the tag<a>.
I just try $(this).closest('li').remove() but dont work also try li.remove(). I have this:
$("#demo").append("<li class='list-group-item'>" + result.Num+ " - " + result.Desc+ "<a onclick='$(this).remove()' href='#'class='pull-right'> Delete</a> </li>");

The correct method to solve your problem is to use $(this).closest('li').remove() to traverse to the nearest parent li to the clicked a and remove it. Note that you will need to escape the quotes within the string, which is the only reason I can see why what you tried would not work.
$("#demo").append('<li class="list-group-item">' + result.Num + ' - ' + result.Desc + '<a onclick="$(this).closest(\'li\').remove()" href="#" class="pull-right">Delete</a></li>');
However a much better approach is to use a delegated event handler instead of outdated on* event attributes, like this:
var $demo = $("#demo").append('<li class="list-group-item">' + result.Num + ' - ' + result.Desc + 'Delete</li>');
$demo.on('click', '.list-group-item a', function(e) {
e.preventDefault();
$(this).closest('li').remove();
});

Calling class attribute not working [duplicate]

This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 8 years ago.
I want to create after every container a click function. It had worked but not anymore. When I want to create the event, he don't recognize the container because in debugger I can see he's going over the box of code.
// Decide list order, load the thumbnail for each publication.
var place = "first";
$('#archive').prepend('<div class="container" id="'+entry.publicationID+'"></div>');
$('.container:' + place).append('<div class="thumb"></div>');
$('.thumb:' + place).css("background-image", 'url(' + entry.thumbnailURL + ')');
$('.thumb:' + place).css("filter", 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=' + entry.thumbnailURL + ',sizingMethod="scale")');
$('.thumb:' + place).css("-ms-filter", 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=' + entry.thumbnailURL + ',sizingMethod="scale")');
// Load the publication title below each thumbnail.
$('.thumb:' + place).after('<div class="title"></div>');
$('.title:' + place).append(entry.publicationName);
// Load the publication startsdate & enddate.
$('.title:' + place).after('<div class="date"></div>');
$('.date:' + place).append(sdate + " tot " + edate);
// Set up publication links.
$('.container:' + place).click(function(){
loadPub(entry.publicationID, entry.publicationName);
setActive(entry.publicationID);
//Change css of current element
});

http://api.jquery.com/on/ this will help you. Basically attach the click on the outer container of the div or box you dynamically create and check the target which is done by "on" api in jQuery

If you are loading these elements dynamically, you'll want to use the .on and delegate events so that elements loaded after the DOM has loaded will know to attach click handlers.
Below is an example of me using the .on(). I declare my parent container in the selector and the specific elements I want to delegate event listeners to. In this case, I can specify the pseudo-class :first and jQuery is smart enough to know to only do it to the first element.
$(document).ready(function(e) {
for (var i = 0; i < 10; i++) {
$('#container').append('<div class="element">Element ' + i + '</div>');
}
$('#container').on('click', ':first', function(e) {
alert('hello! this should only work on the first element!');
});
});
.element {
height: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
</div>

Toggle button in menu

I have a menu which is creating from the code:
document.getElementById('menu').innerHTML += "<li onClick=\"icon_content(" + m + ",'" + image + "','" + name + "')\"><a href=\"#\">" + name + "<\/a><\/li>";
It's in loop and the result is 5 buttons.
It is workig fine but I would to add toggle effect for that. For example changing the button color. When I used:
document.getElementById('menu').style.color='red';
It changed whole menu but I want only button which I clicked.
Is it possible?

That would be done in your event callback, icon_content(). For which, it's better to handle the events centrally rather than inline onclick attributes. So:
document.getElementById('menu').addEventListener('click', function(evt) {
if (evt.target.tagName == 'LI') {
/* your other code here */
evt.target.style.background = 'red';
}
}, false);

Jquery mouse over adding css

I have a p tag inside an anchor, there many be a variable number of instances of this during the loop. My goal is to on hover make the p tag expand and show more information. I have this so far in terms of mouseover.
however this is not working for me. does anyone have any ideas how to achieve this? someonehow i need to use the passed parameter 'e' to change the height
boxOPToneplustwo : this is an a tag as well.
$('.boxOPToneplustwo').mouseover(function (e) {
console.log("in");
$(e.target).next('p').addClass("popupHighlight");
});
element creation:
anchorElement = "<a id='anchor" + countWide + "' class=\"boxOPToneplustwo\" alt=\'"+ image_website +"' style=\"cursor:pointer;width:"+ itemWidth + "px"+";height:"+anchorHeight+";position:absolute;left:"+ locationLeft + "px"+";top:0.3%;\" ><p id=\"test\" class=\"popupDynamic\"> " + popupImageTitles[i] + "</p>";
anchorElement += '</a>';

with jQuery you can use this to refer to the handled element.
$('.boxOPToneplustwo').mouseover(function (e) {
console.log("in");
$(this).next('p').addClass("popupHighlight");
});
http://api.jquery.com/mouseover/
Console play
e.g: trying putting the following code in the console (F12) and see what it does to SO :P
$("p, span").mouseover(function(){ $(this).css("display", "none"); } );