We Keep Coding

Problems with hyperlink in table row

I have a table rows <tr> generated by a loop (PHP). I have transform a entire row in a link, but the problem is a <input type="checkbox"> on the row. Every time I check the box the page redirect because the data-href on the <tr>.
What i want to know is if there is a way to block or stop the checkbox to redirect and the checkbox continue working normally?
HTML:
<tbody>
<tr class="active-row" data-href="../my_link/file.html">
<td><input type="checkbox"/></td>
<td>Note Note</td>
<td>9171690</td>
<td>$156,80</td>
</tr>
</tbody>
JS:
jQuery(document).ready(function($) {
$(".active-row").click(function() {
window.document.location = $(this).data("href");
});
});
SOLUTION(EDIT):
jQuery(document).ready(function ($) {
$(".active-row :checkbox").click(function (e) {
e.stopPropagation();
});
$(".active-row").click(function () {
window.document.location = $(this).data("href");
});
});

Add a "catcher" click to the checkbox first and then add the other click handler:
$(".active-row td input").click(function(e) {
e.stopPropagation();
});
$(".active-row td").click(function(e) {
window.document.location = $(this).data("href");
});

Use preventDefault() in your jQuery code like the following:
jQuery(document).ready(function($) {
$(".active-row").click(function(e) {
e.preventDefault();
});
});

I think you should check current clicked item like this
jQuery(document).ready(function($) {
$(".active-row").click(function() {
if(!$(this).is(':checkbox')){
window.document.location = $(this).data("href");
}
});
});

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/

.filter() then apply only to certain .children()

Can't seem to figure this one out, feel like I'm missing something silly here...
jsFiddle Demo
Basically, when hovering over the remove link, I'm trying to do a line-through on all text in that row, EXCEPT for the <td> with that <a class="remove"> in it.
The basic html structure is:
<tr>
<td>Lorem ipsum text here</td>
<td>01/01/2012</td>
<!-- all <td>'s except for the Remove one should get a line-through -->
<td><a class="remove">Remove</a></td>
</tr>
jQuery:
$('tr').on({
'mouseover' : function () {
$(this).closest('tr').find('td').filter(function () {
var $childElems = $(this).children();
// I can see the <a class="remove"> in .children()
// But for some reason can't just test (hey there's an <a>,
// then don't apply this)
if ($childElems.find('a').length <= 0) {
return $(this).css('text-decoration', 'line-through');
}
});
},
'mouseout' : function () {
$(this).closest('tr').find('td')
.css('text-decoration', 'none');
}
}, 'a.remove');

Inside the filter(), this is each of the td elements in turn. When you call children()on this, you get back a jQuery object which is the <a>, then, you're searching within that <a> for another <a> (which is why you're not seeing it).
Instead:
$(this).closest('tr').find('td').filter(function () {
if ($(this).children('a').length == 0) {
return $(this).css('text-decoration', 'line-through');
}
});
... but that's not really what filter was designed for. You're supposed to use filter to reduce the set of elements, and then operate on the result:
$(this).closest('tr').find('td').filter(function () {
return !$(this).children('a').length;
}).css('text-decoration', 'line-through');

This would be a lot easier if you did not manipulate CSS properties directly, but used a class for that.
Add that class to your tr element on hover, and format the td using the descendant selector:
tr.highlighted td { text-decoration:line-through; }
tr.highlighted td:last-child { text-decoration:none; }

$('tr').on({
'mouseover' : function () {
$(this).closest('tr').find('td').each(function () {
if($(this).find('a.remove').length == 0){
$(this).css('text-decoration', 'line-through');
}
});
},
'mouseout' : function () {
$(this).closest('tr').find('td').css('text-decoration', 'none');
}
}, 'a.remove');

$('a.remove').hover(function () {
$(this).parents('tr').find('td').filter(function () {
return !$(this).find('a.remove').length;
}).css('text-decoration', 'line-through');
}, function () {
$(this).parents('tr').find('td').css('text-decoration', 'none');
});
jsFiddle example

jQuery toggle one class when another is clicked

I am trying to write an if else statement to trigger one class when another one is clicked under the condition that the one class has a marginTop of -200px.
I tried using this if statement but it doesn't work:
if ($('.logintrigger').click() && $('.register').css('marginTop') === '-200px') {
$('.registertrigger').toggle(
function () {$('.register').stop().animate({'marginTop':'-0px'},200); $('#opencloseregister').css({'backgroundPosition':'-20px 0px'});}
);
}
Any suggestions???

Made a jsfiddle with an example of proper ifelse with jquery. http://jsfiddle.net/RQ75m/
$(".logintrigger").click(function(){
if( $(".register").css("margin-top") == "200px" ){
$(".registertrigger").show(); //toggle function here
return false; //so that the page doesn't refresh
} else {
$(".registertrigger").hide();
return false; //so that the page doesn't refresh
}
});​

It sounds like you simply need to rework your expression. The problem is you're trying to see if an element is 'clicked', when you should just attach an event handler.
$('.loginTrigger').click(function()
{
if('.register').css('marginTop') === '-200px')
{
// Do Stuff
}
});

you are calling the click event, i think you want to add an event to the click event...
$('.logintrigger').click( function(e){
if($('.register').css('marginTop') === '-200px'){
$('.registertrigger').toggle();
}
});

When you are calling $('.logintrigger').click(), it is triggering click event.
it should be:
if ($('.logintrigger').click(function(){
if ($('.register').css('marginTop') === '-200px') {
$('.registertrigger').toggle(
function () {
$('.register').stop().animate({'marginTop':'-0px'},200);
$('#opencloseregister').css({'backgroundPosition':'-20px 0px'});
}
);
}
})

$('.logintrigger').on('click', function(){
if($('.register').css('marginTop')==='200px') {
$('.registertrigger').toggle( function () {
$('.register').stop().animate({'marginTop': 0 },200);
$('#opencloseregister').css({'backgroundPosition':'-20px 0px'});
});
}
});

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>