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!
I intend to use the Bootstrap Popover module as a confirmation for a delete event, such that when a <button> is clicked, instead of simply firing a function it opens a popup which let's the user confirm or dismiss the action.
It should be noted for context that the environment is a self-built, one-page ~mvc webapp, where the elements are added dynamically (I thus do not know the number of elements beforehand, nor can I hardcode the actions for each element)
In the current situation (without the popover) I do something similar to this to trigger the direct (non-conformation) action:
$view.on('click', '.deleteButton', function () {
var id = $(this).attr('data-id');
api.delete('someUrl' + id, successFunction);
}):
Where the button would have a markup similar to this:
<button class="deleteButton" data-id="2">Delete me!</button>
However, now I wish to add a confirmation step (e.g. "Are you sure you want to delete this magnificent button? (Y/N)"), and thought of using bootstrap popover.
After brainstorming a bit, what I came up with was a strategy like the following. It is not the optimal solution (the optimal solution would be to extend the popover module so that I would be able to pass in confirmationFunction and cancelFunction to the popover).
Firstly, I would have to initiate the popovers.
$view.find('.deleteButton').popover({
title: 'Are you sure?', //Example title
html: true, //Essential for the html to work as expected
selector: '.deleteButton', //Allow ajaxing in of new elements
container: '.viewName', //So that the popovers reside w/in the current view and thus can be bound to $view (a jQuery object for the view)
content: [...], //Two <button>s with a specified class, e.g. .viewName__deleteButton--popover
});
Secondly, I would bind an event to the buttons inside the popover
$view.on('click', '.viewName__deleteButton--popover', function () {
var id = ??; // Here comes the troubling part - how do I get the ID of the clicked button? How can I target the original button? If I can do that, I think it would solve everything.
api.delete('someUrl' + id, successFunction);
});
The problem that arises is how do I target the originally clicked button?
The only soultion which I can come up with, which isn't very neat at all is to do something like this:
var popoverId = $(this).parents('.popover').attr('id'); //returns popoverXXXXXX
var parentElement = $view.find('[aria-describedBy="' + popoverId + '"]');
It works, but it is a very dirty solution and does not feel 'nice' att all.
Is there any way this can be done in a neater manner? Preferably I would be able to define a general function such as $element.confirmationPopover({popoverSettings...}, confirmationFunction, declineFunction); which could be used in multiple cases.
(PS: I couldn't figure out a concise title for this Q, advice is as always appreciated!)
I solved it by creating an extension to jQuery, such that:
$.fn.confirmationPopover = function (passedInOptions) {
var $view = this;
var defaultOptions = {
confirmationLabel: 'Yes',
container: '.' + this.attr('class'),
declineLabel: 'No',
html: true,
placement: 'left', //top | left | right | bottom
rowClasses: false
};
if (!passedInOptions.declineClass) {
passedInOptions.declineClass = passedInOptions.selector + '__popover__decline';
}
var obj = {}; //Merged options
$.extend(true, obj, defaultOptions, passedInOptions);
var popoverContent = '<div class="row ' + (obj.rowClasses ? obj.rowClasses : 'tac') + '">' +
'<button class="button button--small ' + obj.confirmationClass + '">' + obj.confirmationLabel + '</button>' +
'<button class="button button--small button--outline ' + obj.declineClass + '">' + obj.declineLabel + '</button>' +
'</div>';
if (!obj.content) {
obj.content = popoverContent;
}
/* Initiate Popover */
$view.popover(obj);
/**
* Bind confirmation Button
*/
$view.on('click', '.' + obj.confirmationClass, function () {
var popoverId = $(this).parents('.popover').attr('id');
var $this = $view.find('[aria-describedBy="' + popoverId + '"]');
obj.confirmationFunction($this);
});
/**
* Bind decline button
*/
$view.on('click', '.' + obj.declineClass, function () {
var popoverId = $(this).parents('.popover').attr('id');
var $this = $view.find('[aria-describedBy="' + popoverId + '"]');
if (typeof obj.declineFunction === 'function') {
obj.declineFunction($this);
} else {
$this.popover('hide');
}
});
return this;
};
You can also use popoverX! . It's slightly modal-ish version of bootstrap popovers.
Can you please tell me how to get click event of row which is generated on panel .Actually I am able to get event of row which is generated on page.But i used this http://dbushell.com/2012/06/17/nestable-jquery-plugin/
I want to get click event of row which is generated in panel.
I make a simple demo to show nested list in panel. To open the panel there is button on header "open panel".
when you click "add test case button".it generate rows in panel as well in screen.When you click any of row it open new screen .there is another "add test case " button .it generate the nested list in panel
http://jsfiddle.net/VRPMj/1/
I get the click event of row which is on page like that .
$(document).on('click', '.clickTestCaseRow', function (e) {
var clickId = this.id;
hideDisplayView();
displayNewView(clickId);
alert('click')
e.stopPropagation();
})
When I do same like that on panel list it not work .:(
So there seem to be two problems with this
Firstly, the items in the side panel don't have the class clickTestCaseRow so the $(document).on('click'.. doesn't trigger on them.
var menuid = "menu_" + id;
$('#testSuit').append('<li class="dd-item submenu_h" id="' + menuid + '" ><div class="clickTestCaseRow dd-handle" id="' + menuid + '">' + id + '</div></li>')
Secondly, it seems the nested list plugin stops mousedown events on its items.
So I've disabled the nested list to check and it works now. Without the drag function of nestable though:
http://jsfiddle.net/VRPMj/3/
To really fix the issue you'd have to fiddle with the nestable plugin itself.
I've had a quick look at it and the issue seems to be on line 104.
This prevents the mousedown event on the items. So there's a starting point.
var onStartEvent = function(e)
{
var handle = $(e.target);
if (!handle.hasClass(list.options.handleClass)) {
if (handle.closest('.' + list.options.noDragClass).length) {
return;
}
handle = handle.closest('.' + list.options.handleClass);
}
if (!handle.length || list.dragEl || (!hasTouch && e.button !== 0) || (hasTouch && e.touches.length !== 1)) {
return;
}
e.preventDefault(); // <=== Here
list.dragStart(hasTouch ? e.touches[0] : e);
};
I have a drop down list . The html is like follows
outputText = '<tr id="' + id + '" class="'+pClass+'" onMouseOver="handleMouseOver(\'' + id+ '\');" onMouseOut="handleMouseOut(\'' + id +'\');"></tr>'
JavaScript
this.handleMouseOver = function(id)
$('#'+pLayerName+' tr[id="'+id+'"]').removeClass(pA).addClass(pB);
}
this.handleMouseOut = function(id) {
$('#'+pLayerName+' tr[id="'+id+'"]').removeClass(pB).addClass(pA);
}
My problem is that if the mouse is wrongly placed just below the drop down box then the elemnts from drop down over which the mouse is recently gets highlighted. It should only get highlighted when the mouse move.
At the moment I'm building a list using the following code:
$('<li id="li' + jJob.Id + '"><div style="width: 98%; background-color: #9E7BFF; colour: #000000">' + jJob.Type + ' ' + jJob.AddressClean + ' (' + jJob.Status + ')' + '</div></li>').click(function(e) { ShowStatus('job ' + jJob.Id + ' is available'); UnassignJob(jJob.Id); $(this).remove(); }).bind("contextmenu", function(e) { alert('li' + jJob.Id); return false; }).appendTo('#assignmentList');
This works as previously required. However I need to be able to add another a link which will show another menu allowing various options. The problem is that I've attached the click event to the div. How can I attach it only to the a link?
Create li
Create div
Create a link with click event
Create another a link click event
Append li to #assignmentList
Mark
You want to append your onclick event to your <a> link inside the li correct?
One option would be to remove the
.click(function(e) { ShowStatus('job ' + jJob.Id + ' is available'); UnassignJob(jJob.Id); $(this).remove(); })
And instead place this in your link, e.g.
' stuff '
Where NewClickEvent is defined as
function NewClickEvent(jobID)
{
ShowStatus('job ' + jobID + ' is available');
UnassignJob(jobID); $(this).remove();
}
Note- you may have to fiddle this a bit to get $(this) to work as it did previously... not sure what object it will bring back currently.
You could use either the href attribute as shown, or add an onclick attribute to the link.
Hopefully this should give you at least some inspiration :)