onclick автоматически выполняется для всех моих элементов, но не в элементе, где он щелкнул

HTML:

<section class="get">
<li><button onclick="ShowMyTables()" id="show_my_tables"> Show my tables</button></li>
<ul id = orders> 
</ul>
</section>  `

JS:

теоретически, когда я нажму «show_my_tables», я увижу список ссылок с именами моей таблицы.И когда я нажимаю на одну из этих ссылок, я бы увидел имя этой таблицы,но когда я нажимаю «show_my_tables», все мои onclick выполняются

          function ShowMyTables(){
    $(orders).empty();      
     $.ajax({ 
     type:"GET", 
     url:"/table/show_my_tables", 
     success:function(data){ 
      console.log(data);
      for (var i = 0; i < data.nameArr.length; i++) {

  $(orders).append("<li>Table name:<a  onclick = '"+ShowThisTable(data.nameArr[i])+"'> " + data.nameArr[i] + "</a></li>");

      }
     }

    })

2 ответа

  1. Ваша кнопка должна быть вне списка, потому что в противном случае она будет уничтожена при вызове empty(), поэтому <li>теги вокруг вашего <button>не нужны.

    Значение Id для вашего неупорядоченного списка должно быть заключено в кавычки, как это: <ul id="orders">. При доступе к списку ордеров через $ function ваш аргумент также должен быть заключен в кавычки, так как это строка"orders", а не переменная с именем orders.

    Кроме того, если вы выбираете элемент по id, вы должны добавить его id с#, Поэтому для получения элемента id «orders» вы должны использовать $("#orders").

    Кроме того, я заметил, что вы хотите назначить прослушиватель onclick динамически создаваемым элементам списка, но ваш подход неверен. То, как вы это делаете сейчас, вы выполняете функциюShowThisTable, а затем добавляете ее возвращаемое значение в строку с помощью HTML.

    Учитывая множество основных ошибок в коде, я бы предложил вам пересмотреть синтаксис HTML и javascript, прежде чем переходить к более сложным темам, таким как AJAX.

  2. Все ваши onclickфункции запускаются, потому что вы вызываете ShowThisTable()во время каждой итерации forцикла.

    "ShowThisTable(" и ")"должны быть напечатаны внутри строковых литералов, которые вы объединяете:

    function ShowMyTables(){

    $('#orders').empty();      
    $.ajax({ 
        type:"GET", 
        url:"/table/show_my_tables", 
        success:function(data){ 
        console.log(data);
        for (var i = 0; i < data.nameArr.length; i++) {
            $(orders)
               .append("<li>Table name:<a  onclick = 'ShowThisTable(" + data.nameArr[i] + ")'> " + data.nameArr[i] + "</a></li>");

        }
    }
})

    А idдля ваших <ul>элементов необходимо заключать в кавычки:

    <section class="get">
    <li><button onclick="ShowMyTables()" id="show_my_tables"> Show my tables</button></li>
    <ul id ="orders"> 
    </ul>
</section>