jquery - Javascript .on event handler - Stack Overflow

admin管理员组

文章数量:1022695

I have the following scenario; in my js I have a dynamic hyperlink that I need to capture the clicked link id.

for (var i = 0; i < neighbor.data[3].length; i++){
    <a class="Chris" name="a" id="+i+" href="Chris">Hi</a>
}

Now I can get this with;

    parseInt($(this).attr("ID"));

I am using this to capture the it;

$(document).on("click", "a.a", function(event) {
    event.stopPropagation();
    alert(clickedID);
    clickedID = parseInt($(this).attr("ID"));
});

Now, my problem is that everytime I click on the hyperlink instead of only one clickedID I have one for every hyperlink clicked. Is there a way to prevent this?

I have the following scenario; in my js I have a dynamic hyperlink that I need to capture the clicked link id.

for (var i = 0; i < neighbor.data[3].length; i++){
    <a class="Chris" name="a" id="+i+" href="Chris">Hi</a>
}

Now I can get this with;

    parseInt($(this).attr("ID"));

I am using this to capture the it;

$(document).on("click", "a.a", function(event) {
    event.stopPropagation();
    alert(clickedID);
    clickedID = parseInt($(this).attr("ID"));
});

Now, my problem is that everytime I click on the hyperlink instead of only one clickedID I have one for every hyperlink clicked. Is there a way to prevent this?

• javascript
• jquery

Share Improve this question Follow edited Sep 22, 2012 at 0:14 Fabrício Matté 70.2k2727 gold badges135135 silver badges167167 bronze badges asked Sep 22, 2012 at 0:13 cbm64cbm64 1,13922 gold badges1414 silver badges2727 bronze badges 4

• 1 Could you elaborate a little more on what's the expected behavior and what's the problem? – Fabrício Matté Commented Sep 22, 2012 at 0:16
• Why is your click handler using "a.a" when your elements have the class "Chris"? Also, why are you alerting the clickedID before you set it? Your explanation of what you expect and what actually happens is a bit confusing - perhaps you could create a demo at jsfiddle. – nnnnnn Commented Sep 22, 2012 at 0:17
• 1 What is your for loop supposed to do? Are trying to document.write those anchor tags? – Hazem Salama Commented Sep 22, 2012 at 0:23
• 1 $('a.Chris').on('click', function(e){e.stopPropagation();alert($(this).id)}); – Rafael Herscovici Commented Sep 22, 2012 at 0:26

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

I believe you are getting every anchor tag because you are setting the event on the document, rather than the anchor tag. Try this instead:

$('a').on('click',function(event) {
  event.stopPropagation();
  clickedID = parseInt($(this).attr('id'));
  alert(clickedID);
});

You have an error in your for loop. Your id="+i+" will just set all anchor tags' IDs to +i+ because you are not escaping the plus sign and the variable i

You may try this, "a.a" should be "a.Chris" because Chris is the class name you have used not a andid should start with a non-numeric character.

for (var i = 0; i < neighbor.data[3].length; i++){
    var a='<a class="Chris" name="a" id="id_'+i+'" href="Chris">Hi</a>';
    $('#links').append(a);
}

$("#links").on("click", "a.Chris", function(event) { // You can use $(document).on(...) instead of $("#links").on(...)
    event.preventDefault();
    event.stopPropagation();
    clickedID = parseInt($(this).attr("id").split('_')[1]);
    alert(clickedID);
});

DEMO.

I have the following scenario; in my js I have a dynamic hyperlink that I need to capture the clicked link id.

for (var i = 0; i < neighbor.data[3].length; i++){
    <a class="Chris" name="a" id="+i+" href="Chris">Hi</a>
}

Now I can get this with;

    parseInt($(this).attr("ID"));

I am using this to capture the it;

$(document).on("click", "a.a", function(event) {
    event.stopPropagation();
    alert(clickedID);
    clickedID = parseInt($(this).attr("ID"));
});

Now, my problem is that everytime I click on the hyperlink instead of only one clickedID I have one for every hyperlink clicked. Is there a way to prevent this?

I have the following scenario; in my js I have a dynamic hyperlink that I need to capture the clicked link id.

for (var i = 0; i < neighbor.data[3].length; i++){
    <a class="Chris" name="a" id="+i+" href="Chris">Hi</a>
}

Now I can get this with;

    parseInt($(this).attr("ID"));

I am using this to capture the it;

$(document).on("click", "a.a", function(event) {
    event.stopPropagation();
    alert(clickedID);
    clickedID = parseInt($(this).attr("ID"));
});

Now, my problem is that everytime I click on the hyperlink instead of only one clickedID I have one for every hyperlink clicked. Is there a way to prevent this?

• javascript
• jquery

Share Improve this question Follow edited Sep 22, 2012 at 0:14 Fabrício Matté 70.2k2727 gold badges135135 silver badges167167 bronze badges asked Sep 22, 2012 at 0:13 cbm64cbm64 1,13922 gold badges1414 silver badges2727 bronze badges 4

• 1 Could you elaborate a little more on what's the expected behavior and what's the problem? – Fabrício Matté Commented Sep 22, 2012 at 0:16
• Why is your click handler using "a.a" when your elements have the class "Chris"? Also, why are you alerting the clickedID before you set it? Your explanation of what you expect and what actually happens is a bit confusing - perhaps you could create a demo at jsfiddle. – nnnnnn Commented Sep 22, 2012 at 0:17
• 1 What is your for loop supposed to do? Are trying to document.write those anchor tags? – Hazem Salama Commented Sep 22, 2012 at 0:23
• 1 $('a.Chris').on('click', function(e){e.stopPropagation();alert($(this).id)}); – Rafael Herscovici Commented Sep 22, 2012 at 0:26

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

I believe you are getting every anchor tag because you are setting the event on the document, rather than the anchor tag. Try this instead:

$('a').on('click',function(event) {
  event.stopPropagation();
  clickedID = parseInt($(this).attr('id'));
  alert(clickedID);
});

You have an error in your for loop. Your id="+i+" will just set all anchor tags' IDs to +i+ because you are not escaping the plus sign and the variable i

You may try this, "a.a" should be "a.Chris" because Chris is the class name you have used not a andid should start with a non-numeric character.

for (var i = 0; i < neighbor.data[3].length; i++){
    var a='<a class="Chris" name="a" id="id_'+i+'" href="Chris">Hi</a>';
    $('#links').append(a);
}

$("#links").on("click", "a.Chris", function(event) { // You can use $(document).on(...) instead of $("#links").on(...)
    event.preventDefault();
    event.stopPropagation();
    clickedID = parseInt($(this).attr("id").split('_')[1]);
    alert(clickedID);
});

DEMO.

本文标签： jqueryJavascript on event handlerStack Overflow