I have a clickable parent element. As a child element I have a dropdown. When I click this dropdown, it also triggers the parent element.
The table elements are rendered dynamically as rows, thus I would like to target the elements by Id and not by class.
I have tried with e.stopPropagation() but then it prevents the dropdown to toggle.
Very thankful for any help!
document.getElementById("entirerow"+doc.id).addEventListener("click", function(e){
alert("Entire row clicked")
})
document.getElementById("dropdown"+doc.id).addEventListener("click", function(e){
alert("Only button clicked")
//e.stopPropagation(); I have tried this but it prevents the dropdown from triggering at all.
})
<tr id="entirerow"+doc.id>
<td>
<span>
<button id="dropdown"+doc.id>myDropdown</button>
</span>
</td>
<td>
...
</td>
</tr>
You could return early in your parent listener callback if the event target is the dropdown.
document.getElementById("entirerow"+doc.id).addEventListener("click", function(e){
if(e.target.id === ("dropdown"+doc.id)){
return;
}
alert("Entire row clicked");
})
document.getElementById("dropdown"+doc.id).addEventListener("click", function(e){
alert("Only button clicked");
})
Related
I have the following code which allows me to edit a cell, but the problem is that when I want to click on the link, it forces me to edit instead. I want to be able to edit only when I click on the pen icon, but I can't seem to figure out how to do it.
HTML
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<table border="1" style="width:100px" style="height:99px" style="margin:0
auto">
<tbody>
<tr>
<td>
<div class="row_data" edit_type="click" col_name="datamapname">
<i class="fa fa-pencil"></i>
<a id="dm" href="https://www.google.com/" target="_blank">Sample</a>
</div>
</td>
</tr>
</tbody>
</table>
Jquery
//--->make div editable > start
$(document).on('click', '.row_data', function(event)
{
//Remove pencil icon.
$(this).find('i.fa-pencil').remove();
//Remove link
$("#dm").removeAttr('href');
event.preventDefault();
if($(this).attr('edit_type') == 'button')
{
return false;
}
//make div editable
$(this).closest('div').attr('contenteditable', 'true');
//add bg css
$(this).addClass('bg-warning').css('padding','5px');
$(this).focus();
$(this).attr('original_entry', $(this).html());
})
//--->make div editable > end
// --> save single field data > start
$(document).on('focusout', '.row_data', function(event)
{
event.preventDefault();
if ($(this).attr('edit_type') == 'button')
{
return false;
}
//Add pencil icon back
$(this).append('<i class="fa fa-pencil"></i>');
//Add link back
$("#dm").attr('href','https://www.google.com/');
})
JSFiddle: https://jsfiddle.net/89zgd1ry/
Wrap the anchor tag in another div and set contentEditable="false".
Try to read this
when I want to click on the link, it forces me to edit instead.
This is because you click handler is on the parent row_data div
I want to be able to edit only when I click on the pen icon
Change
$(document).on('click', '.row_data',
to
$(document).on('click', '.row_data>i.fa-pencil',
this will then refer to the icon so you'll have to make appropriate changes, eg:
$(this).find(".fa-pencil").remove();
becomes
var row = $(this).closest(".row_data");
$(this).remove();
add
$('#dm').click(function( e ){ e.preventDefault(); });
And
$(document).on('click', '.fa-pencil',...
I'm trying to stop the bubbling of event of an inner checkbox to the click event of the tr element.
I have the following mark up:
<table border="1">
<tr class="row">
<td>
Item 1
</td>
<td>
<input type="checkbox" class="cb">
</td>
</tr>
<tr class="row">
<td>
Item 2
</td>
<td>
<input type="checkbox" class="cb">
</td>
</tr>
</table>
The rows are dynamically added, so to add listeners automatically to dynamically added elements, I used the following code:
$(document).ready(function() {
$('body').off('click.row').on('click.row', '.row', function() {
alert(1);
});
$('body').off('change.cb').on('change.cb', '.cb', function(e) {
e.stopPropagation();
alert(2);
});
});
However the event still bubble up to the tr element. I tried also the following:
e.stopImmediatePropagation();
window.event.cancelBubbles = true;
e.bubbles = false;
none seemed to work.
I reproduced this issue with JSFiddle:
JSFiddle
In this case, there is no event bubbling occuring because you have different events defined on different elements that just so happen to both fire when a mouse clicks on the check box (because you have also clicked a row).
You should either not add the row click event listener at all, or move stopPropagation to the the other handler to stop it from firing.
$(document).ready(function() {
$('body').off('click.row').on('click.row', '.row', function() {
e.stopPropagation();
alert(1);
});
$('body').off('change.cb').on('change.cb', '.cb', function(e) {
alert(2);
});
});
I have a simple table within a content editable div like so:
<div contenteditable="true">
<table class="rwd-table" width="100%">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
When you click a cell, I'm using jQuery to add an ID to that cell. The ID has CSS applied to highlight it.
$(document).on('click', 'td, th', function (event) {
// remove previous highlighted cell
$('#selectedCell').removeAttr('id');
// highlight new cell
$(this).attr('id', 'selectedCell');
});
When the highlighted cell looses focus, the ID should be removed. This is my problem.
// DOES NOT WORK :( //
$(document).on('blur', '#selectedCell', function (event) {
$('#selectedCell').removeAttr('id');
});
I'm assuming it's because table cells don't normally have focus/blur events.
Is there a way to detect blur on a table cell within contenteditable?
Here is a live example: http://jsfiddle.net/5c7br6zc/
Yes, the problem with blur event. Instead of relying on it try to bind click event on document and prevent it from bubbling in case if click occurred on TD:
$(document).on('click', 'td, th', function (event) {
$('#selectedCell').removeAttr('id');
$(this).attr('id', 'selectedCell');
event.stopPropagation();
});
$(document).on('click', function (event) {
$('#selectedCell').removeAttr('id');
});
Demo: http://jsfiddle.net/5c7br6zc/1/
I have an event on clicking the top <tr> and then also an event on clicking the tr > td > button. When i click the tr > td > button, the related onclick() function is running but, the function related on <tr> is also running after previous.
Like:
<tr onclick="run_tr();">
<td><input type="button" onclick="run_td();" /></td>
</tr>
How can i stop automatically calling the next call by clicking the button?
At button onclick function you need to stop event bubbling:
event.stopPropagation();
Following to your code:
HTML:
<input type="button" onclick="run_td( event );" />
JS:
function run_td( event ) {
if ( event.stopPropagation ) {
event.stopPropagation();
}
event.cancelBubble = true;
// ... rest of your code.
}
You have to stop the event's propagation, by using the method e.stopPropagation(). For more info, check out this link : http://www.quirksmode.org/js/events_order.html#link9
I don't understand why you can't use the recommended methods, here's an example:
<div onclick="alert('div click called');">
Click here to see div onclick
<button onclick="
(event.stopPropagation && event.stopPropagation());
event.cancelBubble = true;
alert('stopped click');
">Button click but no div click</button>
</div>
I have a div as a ui-widget-content with a h3 as a ui-widget-header. The header has three buttons. Each have the class "save" "delete" and "cancel" respectivly. I want to have a .click function whene ever you click on the div, except if you actually click on one of the buttons.
I tried: $(".record").not(".save").not(".delete").not(".cancel").click(
my code is:
<div class="record cursorPointer hoverClass ui-widget-content">
<h3 class="ui-widget-header">
<table width="100%"><tr>
<td align="left" style="width:33%; color:Red">somecontractorone</td>
<td style="width:33%" align="center"> Name: Joe Q Shmoe </td>
<td style="width:33%" align="right"> Buisness: joeqshmoeelectrical</td>
<td><button style="width:20px;height:20px" class="save"></button></td>
<td><button style="width:20px;height:20px" class="delete"></button></td>
<td><button style="width:20px;height:20px" class="cancel"></button></td></tr>
</table>
</h3>
</div>
However the click function still activated when clicking the buttons.
Any ideas?
You can use the event.target to see what was clicked. Then rely on even bubbling and attach the click handler on the parent div. jsfiddle
$('.record').click(function(e){
if($(e.target).is(':button'))
alert('button');
else
alert('not button');
});
Assuming that you have another event handler (or several) that handles the buttons, you can prevent the bubbling there with
$('button').click(function(e) {
e.stopPropagation();
switch( this.className ) {
// Or whatever...
}
})
Use e.stopPropagation() in the buttons' click handler(s):
$('button').click(function(e) {
e.stopPropagation();
alert('you clicked a button!');
});
Here's a demo: http://jsfiddle.net/Ender/2yERz/
And some documentation on e.stopPropagation(): http://www.quirksmode.org/js/events_order.html#link9