Question

I have two input fields and two buttons in a row. Like that having 3 or more rows in a page. For each row i need to enable the two buttons only when the two input fields have any value. I gave id for two buttons like this.

<a href="#" style="margin: auto;" id="first_link"></a>
<a href="#" style="margin: auto;" id="second_link"></a>

In jquery i gave as follows:

$('#first_link').click(function() {alert("Some info will come soon")});
$('#second_link').click(function() {alert("new info will come soon")});

But this alerts coming for all rows (for three rows 3 alerts showing). How can i show alert only one time for entire table in that page.

Answer 1

$('#first_link').click(function(e) {
    e.preventDefault(); // will prevent the link's default behavior
    e.stopPropagation(); // will stop event bubbling
    alert("Some info will come soon");
});

$('#second_link').click(function(e) {
    e.preventDefault(); // will prevent the link's default behavior
    e.stopPropagation(); // will stop event bubbling
    alert("new info will come soon");
});

A different example.