JQuery/HTML: Как обеспечить функцию .click для множественных идентификаторов элемента?

Question

У меня есть эта АЯКС функция успеха:

success: function (data){ 

     var str = JSON.stringify(data); 
     var obj = JSON.parse(str); 
    for(var i= 1; i<=obj.length-1;i++) 
     { 
      $('#Name').append(obj[i].Name + "<br>"); 
      $(this).attr('id',obj[i].Id); 
      $('#this.id').click(function(){ 
      window.location.href = "test.html"; 
      }) 
     } 

HTML код:

<table class="table table-striped table-bordered table-hover " id= "TableData" border : "1 px solid black"> 
<tr> 
    <td>Product Name </td> 
    <td id="Name"> </td> 
</tr> 
</table> 

Я хочу, чтобы обеспечить связь с каждым идентификатором имени.
Например: Выход таков:

ABC0
АВС1
ABC2
ABC3

Я хочу, чтобы связать все ABC на другую страницу с помощью .click() свойство JQuery. Как это достичь? Данный код не работает. Пожалуйста, помогите.

Answer 1

Каков результат $ (this)? Где это указывает? Вы пытались проверить его с помощью console.log? Кроме того, $ ("# this.id") определенно неверно, вы ищете элементы с id = "this" и class = "id", которые, вероятно, не существуют. Вероятно, вы должны заменить это с помощью («#» + obj [i] .Id). Помимо этого, я не очень хорошо понимаю, что $ (это) для вас. Вы добавляете обычный текст в идентификатор с id = "Name", но тогда как вы устанавливаете для них идентификатор? Вы пытались сделать append, в котором уже указано имя и идентификатор? Что-то вроде

$('#Name').append('<span id="' + obj[i].Id + '">' + obj[i].Name + '</span><br>'); 
$('#' + obj[i].Id).click(function(){window.location.href = "test.html";}) 

Answer 2

Вы можете использовать селектор атрибутов startsWith. Здесь делегирование его document уровня поэтому нет необходимости устанавливать его в любом виде цикла:

$(document).on('click', '[id^=ABC]', function(){ 
    // do stuff with 'this.id' 
}); 

Answer 3

я вижу несколько проблем в вас коде, вы не можете иметь несколько экземпляра ID на ту же странице. Я бы предпочел использовать для этого класс. Плюс я предполагаю Я не понимаю ваш вопрос 100%, но я думаю, вы пытаетесь добавить событие click на все td. Вместо этого добавьте атрибут данных, называемый data-link, ко всему теневому тэгу, и добавьте в основной столбец элемент с одним щелчком, чтобы при щелчке таблицы событие было запущено. Затем используйте event.target, чтобы найти элемент, который был нажат, и проверьте, имеет ли он соответствующий атрибут данных, если он имеет ссылку на данные attr, тогда вы можете извлечь значение и перенаправить его.

$(document).ready(function() { 
    $("#mainTable").click(function(event){ 
     if(event.target.hasAttribute("data-link")){ 
     //this is where you would have your code 
     console.log(event.target.getAttribute('data-link')); 
     } 
    }); 
    }); 

Answer 4

* Вы можете назначить общий класс для каждого звена и просто добавить событие щелчка для этого класса, как:

success: function (data){ 
     var str = JSON.stringify(data); 
     var obj = JSON.parse(str); 
    for(var i= 1; i<=obj.length-1;i++) 
     { 
      var node= $('<a class="linknav">'+obj[i].Name+'</a><br>') 
      node.attr('id',obj[i].Id); 
      $('#Name').append(node); 
     } 
} 

$(document).on('click','.linknav',function(){ 
window.location.href = "test.html"; 
}); 

Answer 5

Попробуйте для доступа ко всем элементам стартов идентификаторов с ABC.

Фрагменты кода:

$("[id^='ABC']").click(function(){ 
     window.location.href = "test.html"; 
    }); 

И это также

success: function (data){ 

    var str = JSON.stringify(data); 
    var obj = JSON.parse(str); 
    for(var i= 1; i<=obj.length-1;i++) 
    { 
     $('#Name').append(obj[i].Name + "<br>"); 
     $(this).attr('id',obj[i].Id);   
    } 
    //...