Button within clickable table cell - javascript

I have a table cell which is clickable and fires a jQuery event when clicked. Within that cell I also have a button, which has another jQuery event when clicked. The issue is, when the button is clicked both the cell and button events are fired.
For example:
<script>
$(document).ready(function () {
$('#cell').click(function () {
alert('cell clicked');
});
$('#button').click(function () {
alert('button clicked');
});
});
</script>
<table>
<tr>
<td id="cell">
<button id="button">go</button>
</td>
</tr>
</table>
How can I prevent the cell click event being fired when the button is clicked?

You can use stopPropagation() which allow you to stop bubbling of event to the parent dom.
Example
$('#button').click(function (e) {
e.stopPropagation();
alert('button clicked');
});
set the table width to 100% and test it.
Test Code
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(function()
{
$('#cell').click(function () {
alert('cell clicked');
});
$('#button').click(function (e) {
e.stopPropagation();
alert('button clicked');
});
});
</script>
<table width="100%">
<tr>
<td id="cell">
<button id="button">go</button>
</td>
</tr>
</table>

stop the event propagation which is called event bubbling to the parent:
$('#button').click(function (e) {
e.stopPropagation();
alert('button clicked');
});

You need to use
stopPropagation
This example should fix it:
$(document).ready(function () {
$('#cell').click(function () {
alert('cell clicked');
});
$('#button').click(function (e) {
e.stopPropagation();
alert('button clicked');
});
});
That should fix it.

$(document).ready(function(){
$('#cell').click(function(event){
if($(event.target).is('#button')){
event.stopPropagation();
}
});
});

Related

Jquery - Triggering click on mouseenter on div and unclick if clicked on any other button

I want to trigger a click on "bigbutton" when hovering over a div, "div1". And if I click on any other button, the "bigbutton" needs to be unclicked and the click need to move the newly clicked button. Here's what I've tried:
Html
<div class="div1">
<button id="bigbutton">bigbutton</button>
<button type="button" id="button1">button1</button>
<buttton type="button" id="button2">button2</button>
</div>
Jquery
$(document).ready(function () {
$("#bigbutton").click(function () {
$(this).css("background-color", "red");
});
$(".div1").mouseenter(function () {
$("#bigbutton").trigger('click');
});
});
With the above code, I'm only able to do half of what I want. So, tried the following, did not work.
$(document).ready(function () {
$("#bigbutton").click(function () {
$(this).css("background-color", "red");
});
$(".div1").mouseenter(function () {
$("#bigbutton").on('click');
});
$("button").click(function () {
$("#bigbutton").off('click');
});
});
PS. I'm extremely sorry about the formating errors as my phone has a broken screen.
Something like this?
$(document).ready(function () {
$("#bigbutton").click(function () {
$(this).css("background-color", "red");
});
$(".div1").mouseover(function () {
$("#bigbutton").trigger('click');
});
$("#button1").click(function () {
$("#bigbutton").off('mouseover').css("background-color", "");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="div1">
<button id="bigbutton">bigbutton</button>
<button type="button" id="button1">button1</button>
<buttton type="button" id="button2">button2</button>
</div>

jQuery event delegation html table issue

I'm having an issue using jQuery event delegation on a html table.
My html table contains a click button on each row which open an additional html window using jQuery. The event works to open the window however the close event does not.
ps: I want to use jQuery event delegation as I add new row in my table after having already bound the above listener.
here is a jsfiddle.
$(".list").on("click", "[data-window-open]", function(e) {
e.preventDefault();
e.stopPropagation();
var targeted_popup_class = $(this).attr('data-window-open');
$('div[data-window="' + targeted_popup_class + '"]:first').toggle();
});
$(".list").on("click", "[data-window-close]", function(e) {
e.preventDefault();
if ($(".window").is(":visible")) {
$(".window").hide();
}
});
.window {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="list">
<tr>
<th>name</th>
<th>more</th>
</tr>
<!-- Popup Window 1 -->
<div class="window" data-window="1">
Ryan Sanchez
close
</div>
<tr>
<td>Ryan</td>
<td>click</td>
</tr>
<!-- Popup Window 2 -->
<div class="window" data-window="2">
Pascal Reventon
close
</div>
<tr>
<td>Pascal</td>
<td>click</td>
</tr>
</table>
Change the selectors of the handlers:
$("[data-window-open]").on("click", function(e)
And
$("[data-window-close]").on("click", function(e)
I made the close event as a function which is working with default and added rows.
$(".list").on("click","[data-window-open]", function(e)
{
e.preventDefault();
e.stopPropagation();
var targeted_popup_class = $(this).attr('data-window-open');
$('div[data-window="' + targeted_popup_class + '"]:first').toggle();
closeWindow();
});
function closeWindow()
{
$("[data-window-close]").on("click", function(e)
{
e.preventDefault();
if($(".window").is(":visible"))
{
$(".window").hide();
}
});
}

Click On window to add class on span

I can remove class when I click On button. I need To add the remove class again after I click on button and span display when I click On window
my HTML file
<button>Click To show Comment</button>
<span class="my_comment my_comment_none">Hello</span>
my CSS FILE
.my_comment{display: block} .my_comment_none{display: none}
my js File
$(document).ready(function () {
$("button").click(function () {
$(this).removeClass("my_comment_none");
});
});
You can attach the click event on document object and check the target name to hide or show the comment:
$(document).ready(function () {
$(document).click(function (e) {
if($(e.target).is('BUTTON'))
$('.my_comment').show();
else
$('.my_comment').hide();
});
});
.my_comment{display: none}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Click on the button to show the comment
and hide the comment on clicking anywhere else</div>
<button>Click To show Comment</button>
<span class="my_comment" id="comment">Hello</span>
use toggleClass
$(document).ready(function () {
$("button").click(function () {
$(this).toggleClass("my_comment_none");
});
});
for window click . maintain any unique id for button and use selectors with id
$(window).click(function () {
if ($('button').hasClass("my_comment_none")) {
$('button').removeClass("my_comment_none");
}
})
;
use toggleClass
$(document).ready(function () {
$("button").click(function () {
$(this).toggleClass("my_comment_none");
});
});
You may use simply jQuery slideToggle() function.
$("button").click(function(){
$(".toggle").slideToggle();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Click To hide/show</button>
<div class="toggle">Hello</div>

jQuery unbind click handler with .off and then rebind with .on

I am trying to prevent a button from being clicked twice by accident by unbinding the click handler with .off like this...
$(".button").click(function () {
console.log("Button has been clicked and disabled");
$( ".button" ).off();
});
$(".button2").click(function () {
console.log("Button has been re-enabled");
$( ".button" ).on();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="button">
Click Me
</div>
<button class="button2">
Re-enable click
</button>
I am struggling with rebinding it with .on, can anyone point me in the direction of an example or point out what I am doing wrong?
In your click function for button 2, re-enable the first button's click handling with : $(".button").click(buttonOneClick);
Here is an example:
var buttonOneClick = function () {
console.log("Button has been clicked and disabled");
$( ".button" ).off();
};
$(".button").click(buttonOneClick);
$(".button2").click(function () {
console.log("Button has been re-enabled");
$(".button").click(buttonOneClick);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="button">
Click Me
</div>
<button class="button2">
Re-enable click
</button>
Using .one()
using .one() there's no need to use .off() since the event is allowed only once. To re-enable the button you simply re-call the enabling function that does the .one() stuff:
function buttonExec() {
console.log("Button has been clicked and disabled");
}
function buttonEnable() {
console.log("Button has been enabled");
$(".button").one("click", buttonExec); // .one()
}
buttonEnable(); // enable initially
$(".enable").on("click", buttonEnable); // and on ".enable" click
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="button">Click Me</button>
<button class="enable">Re-enable click</button>
Using .on() and .off()
function buttonExec() {
console.log("Button has been clicked and disabled");
$(this).off("click"); // .off() since we used .on()
}
function buttonEnable() {
console.log("Button has been enabled");
$(".button").on("click", buttonExec); // .on()
}
buttonEnable(); // enable initially
$(".enable").on("click", buttonEnable); // and on ".enable" click
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="button">Click Me</button>
<button class="enable">Re-enable click</button>

Adding click event to markup I can't edit

I am not able to edit any of the following markup and I am trying to add a click event to the .datepick-days-cell element.
<td class="datepick-days-cell onclick="jQuery.datepick._selectDay(this,'#calendar_booking5',1493179200000)" ></td>
I tried the following simple jQuery on click event but had no luck:
$('.datepick-days-cell').on('click', function() {
alert('test click');
});
I'm assuming this does not work because it can't take precedence over the event handler that is bound to the element. Any ideas?
Following worked for me:
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$( document ).ready(function() {
$('.datepick-days-cell').on('click',function() {
alert('test click');
});
});
</script>
<table border="1">
<tr>
<td class="datepick-days-cell" onclick="jQuery.datepick._selectDay(this,'#calendar_booking5',1493179200000)" >Test Click</td>
</tr>
</table>
Does this work?
$('.datepick-days-cell').click(function() {
alert('test click');
});

Categories