I'm having issues preventing a child element from activating a parent click event in jQuery. I've Google'd around and have stumbled upon a couple different solutions, none of which appear to work for me.
I need to make a table cell editable after clicking it so that I can submit the edited text asynchronously via ajax. I'm using jQuery to replace the text with an input field but it then can't be edited or submitted because each click fires the parent event again.
I've tried using:
$("child").click(function(e){
e.stopPropagation();
})
And also .unbind("click") on the parent as once it's been clicked it won't need to be clicked again but this seems to unbind the child too.
I've prepared a fiddle in order to properly show the problem.
Any help at all would be super! It's driving me crazy.
The problem is because the .btn-comment element is being dynamically appended, so you need a delegated handler. Try this:
$(".td-edit").on('click', '.btn-comment', function(e) {
e.stopPropagation();
});
Updated fiddle
Note in the fiddle - you can see the event is not being propagated because the alert() does not fire when clicking the button element.
A couple things here.
Everytime you click onto the table cell, you're regenerating the form elements. This includes not only the click on the cell to switch the contents to the edit control, but also when you click onto the textfield to focus on it to perform text changes
The click for your button, will never fire, as it's being bound BEFORE the control exists in the dom.
My suggestion would be to have the controls already exist on the page, but have the clicking of the element be for controlling the VISIBLITY of the textbox. Additionally, put the text to be clicked into a span or label or div, and click on it that way, as opposed to the actual cell.
$("#td-edit").click(function() {
$("#td-edit").hide();
$("#dvEdit").show();
});
$("#btn-comment").click(function(e) {
$("#td-edit").show();
$("#dvEdit").hide();
});
Updated fiddle
I've updated your fiddle and it seems to work with what I created. Putting it here as well for reference:
function clickEdit() {
$(this).html("<div class=\"input-append\"><input class=\"updater-text span2\" type=\"text\" value=\"" + $(this).text() + "\" /><button class=\"btn-comment\" type=\"button\" id=\"appendedInputButton\">Save</button>").off('click');
$('#appendedInputButton').on('click', function(e) {
e.stopPropagation();
e = $(this);
console.log(e.prev().val());
e.parent().html(e.prev().val()).on('click', clickEdit);
});
}
$(".td-edit").on('click', clickEdit);
Fiddle link: http://jsfiddle.net/9F67j/14/
Related
I have this code in the bottom of the page:
$('.checkbox-class:checkbox').on('click', function () {
alert($(this).val());
});
I have a datatable with a td with this input:
<input class="checkbox-class" type="checkbox" name="compartir[]" value="{{$row->id}}">
I can see the alert on each click of the checkbox of the first page, but when I move to the 2nd page, the script is not listening this clicks. But, if I reload the page, and move first to the 2nd page, then I do my first clicks, javascript can catch them well, but if I move to the 1st page, javascript doesn't listen them (on that, the 1st page)
I don't get it whay is happening this.
EDIT: A fiddle about it:
https://codepen.io/anon/pen/EBjNPW
You can use delegation for the event by attaching it to the table itself and only firing on the specific class type, I take it you are using JQuery as you have it in your example above, so this should serve your needs, notice how the 2nd parameter of .on is the className of the checkbox items in the table, this will then fire anytime a checkbox with that className inside the parent table is clicked:
$('#yourTable').on('click', '.checkbox-class:checkbox', function(){
alert($(this).val());
});
I have 2 DIVs and in each DIV there's a Button which does something on click.
Now I've added a piece of code to bring the DIVs to front when they get a mousedown. Which works very well. The problem is, that they swallow the mousedown of the inner button... The inner button can only be clicked by double clicking it.
http://jsfiddle.net/nUtz6/
$('div').mousedown(function (event) {
$(this).parent().append($(this));
});
how could I solve this problem? I did it this way because I don't want to increment the z-index of the CSS property to some magic number everytime I click the div. I read that jquery also does the DOM manipulation trick.
The problem seems to occur because I change the DOM right before the click-Event of the button. If I don't do anything in the mousedown, everything works fine.
Just check that the DIV is actually the target of the event :
$('div').mousedown(function (event) {
if (event.target.tagName.toLowerCase() != 'button')
$(this).parent().append($(this));
});
FIDDLE
I have done this million times before but this time it simply will not work!
I have a function that dynamically adds a form with a link that will act as a button
content += '<a name="btn-opprettKontakt" id="btn-opprettKontakt" class="btn-opprettNy btn btn-small btn-primary pull-right" data-action="opprettKontakt">Opprett</a>';
return content;
Then I have this event handler for the link
$('body').on('click','.btn-opprettNy', function() {
alert('button clicked');
});
The form is inside a select2 container, which is also dynamically added, so there is no parent element other than 'body'. But this never fires.
I also have an event handler for all 'button' elements that checks the data-action, which works on all other buttons. If I change this link to a button it never fires either.
Am I missing something here? .on() should work for dynamically added elements if I use an element that exists on document.ready, like 'body' , right?
Maybe the select2 container is messing things up?
I have other event handlers on dynamically added elements that work just fine.
UPDATE
Select2 kills all mouse events inside the dropdown. The only solution I have found so far is to use an inline onclick
Select2 kills all mouse events inside the dropdown.
The only solution I have found so far is to use an inline onclick
Here is also a solution that might help others with similar issues.
I have created divs with Click Event based on a value entered in a text box.
An Example Here
When you open the page and click any of the rows, you will get an alert. But when you change the value in the text box (Enter Number) and hit load button, then the rows will load based on the number entered.
Now when you click any rows, the click event does not work.....
Any Help in this regard is highly appreciated..........
You need the live function.
$(".schoolselect").live("click", function() {
See here: http://jsfiddle.net/27Z3t/
Your click handler for $('.schoolselect') is only attached once when the page loads. It is not a live jQuery event but that technique is deprecated in favour of the delegate model.
You can attach a delegate to $('#divHSSchoolResultTable') that will handle the clicks;
$('#divHSSchoolResultTable').delegate('.schoolselect', 'click', function() { alert(); });
See jQuery delegate for more details.
I have a slideshow that has 5 slides (each has an individual id) and a previous and next button. When hovering the previous or next button you get a tooltip, the tooltip uses jQuery to get the ID attribute from the previous and next div and show this.
Ive gotten it working fine on mouseenter only if you dont leave the div and keep clicking the Tooltip doesnt update, you have to leave the arrows after each click for the value to be aupdated, does this make sense?
my script is...
$("div.arrows div").bind("mouseenter", function () {
$("div.arrows div.next").children("span").html($("div.roundabout-in-focus").next("div").attr("id"));
$("div.arrows div.prev").children("span").html($("div.roundabout-in-focus").prev("div").attr("id"));
});
Since you are not leaving the div the next mouseenter is not fired which will update the tooltip. Try to set the tooltip on slide change event if supported by the plugin you are using or click event of the prev/next buttons.
You will have to bind the updated html to the click event also then. This may work. Hard to tell without your html.
$("div.arrows div").bind("click, mouseenter", function () {
$("div.arrows div.next").children("span").html($("div.roundabout-in-focus").next("div").attr("id"));
$("div.arrows div.prev").children("span").html($("div.roundabout-in-focus").prev("div").attr("id"));
});
What does mouseover do and do you want it to change after a click on the next/prev button? I think you have to remove the inner HTML before appending new HTML. Maybe try to empty the element with .empty() and add a click event to catch that and call the function from there as well. Also try to log or alert some feedback to know when it does fire.