We Keep Coding

Disable click fot td for particular column using Jquery

I have tried to use Jquery to click a table row to go to a new page. But my last column has a button. For which clicking on the edge takes it to a new page. Anyway to disable the td onclick for that column. I tried using onclick='event.stopPropagation();return false;' but that would disable the button too.
My Jquery code below.
$(".myTable").on("click", "td", function(){
var issueid = $(this).closest('tr').find("td:eq(2) input").val();
window.location = 'viewminissues.jsp?issue_id='+issueid;
});

This can be handled in two ways:
Try adding event.preventDefault() along with event.stopPropagation().
Add a disabled class on the td element manually and then handle further scenarios with hasClass('disabled') check.

The issue is because the click event from the button propagates up the DOM to the tr which then transfers the page.
To fix this you could call stopPropagation() within the button event handler:
$(".myTable").on("click", "td", function() {
var issueid = $(this).closest('tr').data('issue');
console.log('Transferring to: viewminissues.jsp?issue_id=' + issueid);
//window.location.assign('viewminissues.jsp?issue_id=' + issueid);
});
$('.myTable').on('click', 'button', function(e) {
e.stopPropagation();
console.log('Perform button action...');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="myTable">
<tr data-issue="1">
<td>Foo bar</td>
<td><button>Edit</button></td>
</tr>
<tr data-issue="2">
<td>Lorem ipsum</td>
<td><button>Edit</button></td>
</tr>
</table>

You can exclude the last <td> from the click() event using :not(:last) like this:
$(".myTable").on("click", "td:not(:last)", function() {
var issueid = $(this).closest('tr').find("td:eq(2) input").val();
window.location = 'viewminissues.jsp?issue_id=' + issueid;
});

blur event not working as expected with dynamically created inputs

I have a table which can have some dinamically created inputs, so the user can throw in some values and make some calculations:
<table>
<thead>...</thead>
<tbody>
<tr>
<td>Info</td>
<td><input class="inputsTable"/></td>
<td><input class="inputsTable"/></td>
</tbody>
</table>
When the user inputs a value and the blur event occurs, the system would do some calculations. I had the "multiple blur events firing" problem and i solved like this:
<script>
$(document).ready(function () {
$(".inputsTable").mask("#.##0,00", { reverse: true });
//setting up masks
});
let isBound = false;
$('.inputsTable').on('input propertychange paste', function () {
if (!isBound) {
isBound = true;
$(this).on('blur', function () {
alert($(this).val());
});
}
});
</script>
It works for the first input. If i try to fire the blur event from the second input, it won't work. And if i reset the isBound variable:
$('.inputsTable').on('input propertychange paste', function () {
if (!isBound) {
isBound = true;
$(this).on('blur', function () {
alert($(this).val());
isBound = false;
});
}
});
Sometimes it works, but sometimes it will fire multiple times. How can i solve this?

Try this if it works. If you are inserting or appending inputs dynamic then you should use document to reload the DOM.
$(document).on('.inputsTable','input propertychange paste', function () {
if (!isBound) {
isBound = true;
$(this).on('blur', function () {
alert($(this).val());
isBound = false;
});
}
});
OR
$(document).on('.inputsTable','input propertychange paste', function () {
$(this).on('blur', function () {
alert($(this).val());
});
});
But it would be fine if you upload the full code.

2 times a different class on tr and td with .click

My javascript:
$(".openPage").click(function() {
alert(1);
});
$(".openButton").click(function() {
alert(2);
});
My html:
<tr class='openPage'>
<td></td>
<td><button class='openButton'></button></td>
</tr>
When i click on my button inside the td the first function is fired instead of the function with alert(2). How can i fix this?

All you need is to event.stopPropagation() on the button item. That's all
$(".openPage").click(function() {
alert(1);
});
$(".openButton").click(function(evt) {
evt.stopPropagation(); // The click won't propagate to .openPage parent
alert(2);
});

Well, the elemen is contained within the first one.
But you can, if you really need do:
$('.openPage').click(function(e, event) {
if ( $(e).hasClass('openButton) ) {
$(e).trigger('click');
}
});
OR better
var page = $('.openPage');
page.click(function(e, event) {
if ( $(e) != page ) {
$(e).trigger('click');
}
});
You could also try:
event.stopPropagation();

Class use in different element (other jQuery selector not working)?

Can someone explain to me or point me to other solution for this:
class fruit is in two different tag element, and one element has add class use in jquery selector, but the alertbox is not showing. ("add is clicked")
<table>
<tr>
<td>Apple</td>
<td>Apple 2</td>
</tr>
<tr>
<td>Banana</td>
<td>Banana 2</td>
</tr>
</table>
Also when i clicked the Apple link, i want the two alert box to show.
see this FIDDLE for demo.
$('.add').off("click").on("click", function () {
alert("add is clicked");
});
$('.fruit').off("click").on("click", function () {
alert("fruit is clicked");
});

You are already doing it correct, just remove "off".
$('.fruit').on("click", function () {
alert("fruit is clicked");
});
$('.add').on("click", function () {
alert("add is clicked");
});

Don't really know what you did, but i think you would like to have this results.
$('.add').click(function () {
alert("add is clicked");
});
$('.fruit').click(function () {
alert("fruit is clicked");
});
Look here :
http://jsfiddle.net/x957pbrr/1/

In your Fiddle, you are using off("click") before the on("click", function...). The first off clears all previously registered click handlers. So you are turning off the add click handler before you add the fruit click handler

The off method unbinds all prior bound click events.
I think you would be better off putting these events into one handler.
$('.fruit').click(function () {
if ($(this).hasClass('add'))
alert("add is clicked");
else
alert("fruit is clicked");
});

When you use ".off('click')" in 2, you remove the event handler added in 1.
1. ---
$('.add').off("click").on("click", function () {
alert("add is clicked");
});
2. ---
$('.fruit').off("click").on("click", function () {
alert("fruit is clicked");
});
Put it in reverse order:
$('.fruit').off("click").on("click", function () {
alert("fruit is clicked");
});
$('.add').off("click").on("click", function () {
alert("add is clicked");
});
Read this: http://api.jquery.com/off/

jQuery - Dynamically Create Button and Attach Event Handler

I would like to dynamically add a button control to a table using jQuery and attach a click event handler. I tried the following, without success:
$("#myButton").click(function () {
var test = $('<button>Test</button>').click(function () {
alert('hi');
});
$("#nodeAttributeHeader").attr('style', 'display: table-row;');
$("#addNodeTable tr:last").before('<tr><td>' + test.html() + '</td></tr>');
});
The above code successfully adds a new row, but it doesn't handle adding the button correctly. How would I accomplish this using jQuery?

Calling .html() serializes the element to a string, so all event handlers and other associated data is lost. Here's how I'd do it:
$("#myButton").click(function ()
{
var test = $('<button/>',
{
text: 'Test',
click: function () { alert('hi'); }
});
var parent = $('<tr><td></td></tr>').children().append(test).end();
$("#addNodeTable tr:last").before(parent);
});
Or,
$("#myButton").click(function ()
{
var test = $('<button/>',
{
text: 'Test',
click: function () { alert('hi'); }
}).wrap('<tr><td></td></tr>').closest('tr');
$("#addNodeTable tr:last").before(test);
});
If you don't like passing a map of properties to $(), you can instead use
$('<button/>')
.text('Test')
.click(function () { alert('hi'); });
// or
$('<button>Test</button>').click(function () { alert('hi'); });

Quick fix.
Create whole structure tr > td > button; then find button inside; attach event on it; end filtering of chain and at the and insert it into dom.
$("#myButton").click(function () {
var test = $('<tr><td><button>Test</button></td></tr>').find('button').click(function () {
alert('hi');
}).end();
$("#nodeAttributeHeader").attr('style', 'display: table-row;');
$("#addNodeTable tr:last").before(test);
});

Your problem is that you're converting the button into an HTML snippet when you add it to the table, but that snippet is not the same object as the one that has the click handler on it.
$("#myButton").click(function () {
var test = $('<button>Test</button>').click(function () {
alert('hi');
});
$("#nodeAttributeHeader").css('display', 'table-row'); // NB: changed
var tr = $('<tr>').insertBefore('#addNodeTable tr:last');
var td = $('<td>').append(test).appendTo(tr);
});

You can either use onclick inside the button to ensure the event is preserved, or else attach the button click handler by finding the button after it is inserted. The test.html() call will not serialize the event.

You were just adding the html string. Not the element you created with a click event listener.
Try This:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
</head>
<body>
<table id="addNodeTable">
<tr>
<td>
Row 1
</td>
</tr>
<tr >
<td>
Row 2
</td>
</tr>
</table>
</body>
</html>
<script type="text/javascript">
$(document).ready(function() {
var test = $('<button>Test</button>').click(function () {
alert('hi');
});
$("#addNodeTable tr:last").append('<tr><td></td></tr>').find("td:last").append(test);
});
</script>