При нажатии не работает динамически добавленный атрибут идентификатора ссылки - PullRequest
Новая
       22

При нажатии не работает динамически добавленный атрибут идентификатора ссылки

0 голосов
/ 15 мая 2018

У меня есть ссылка, и при загрузке страницы я динамически добавляю «id», ссылка указывает на выход из системы.

При нажатии на ссылку выхода из системы мне нужно выполнить ajax.Мне удалось добавить идентификатор, но по щелчку не работает.

Ниже мой код: 

$(document).ready(function(){
    $('ul#main-navigation li').each(function(index) {
        var text =  jQuery.trim($(this).text());
        if (text == "Log Off") {
            $(this).children().attr('id',"log_out_link");
        }
    });
});
$(document.body).on('click', '#log_out_link', function(e){
    e.preventDefault();
    alert("edsddd");
    return false;
});

Любая помощь приветствуется.

ОТВЕТ: 

$(document).ready(function(){
    $('ul#main-navigation li').each(function(index) {
        var text =  jQuery.trim($(this).text());
        if (text == "Log Off") {
            $(this).children().attr('id',"log_out_link");
            // onclick staff here
            $('#log_out_link').on('click', function(e){
                e.preventDefault();
                alert("edsddd");
                return false;
            });
        }
   });
});

Ответы [ 3 ]

0 голосов
/ 15 мая 2018

Попробуй это. JQuery найти DOM, где он будет добавлен. 

$(document).ready(function(){
    $('ul#main-navigation li').each(function(index) {
        var text =  jQuery.trim($(this).text());
        if (text == "Log Off") {
            $(this).children().attr('id',"log_out_link");
            // onclick staff here
            $('#log_out_link').on('click', function(e){
                e.preventDefault();
                alert("edsddd");
                return false;
            });
        }
   });
});
0 голосов
/ 15 мая 2018

Вы получаете текстовое содержимое li, которое содержит другие узлы (в результате получается текст li + его дочерние узлы, поэтому никогда не будет равно "Log Off"),

Вы можете получить текст узла, клонируя его, удаляя его дочерние элементы и получая только его текст, так как ваш оператор if здесь будет работать правильно 

$(this).clone().children().remove().end().text()

Также неправильно указывать одинаковые идентификаторы для нескольких узлов (дочерние элементы узла li), поэтому используйте вместо него класс:

См. фрагмент ниже: 

$(document).ready(function() {
  $('ul#main-navigation li').each(function(index) {
    var text =jQuery.trim($(this).clone().children().remove().end().text());
    console.log(text);
    if (text == "Log Off") {
      $(this).children().attr('class', "log_out_link");
    }
  });
});

$(document.body).on('click', '.log_out_link', function(e) {
  e.preventDefault();
  alert("edsddd");
  return false;
});
p.log_out_link {
  color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="main-navigation">
  <li>Log On</li>
  <li>Log In<p><a>text</a></p><p><a>text</a></p></li>
  <li>Log Off
    <p><a>text</a></p><p><a>text</a></p></li>
  <li>Log Out<p><a>text</a></p><p><a>text</a></p></li>
</ul>
0 голосов
/ 15 мая 2018

, потому что вы добавляете id после того, как document готов, а затем добавляете слушателя к этому id из предварительно загруженного document.

попробуйте использовать 

$(document).ready(function()
            {
              $('ul#main-navigation li').each(function(index) {
                 var text =  jQuery.trim($(this).text());
                 if (text == "Log Off") {
                     $(this).children().attr('id',"log_out_link");
                 }
              });
            });
            $('#log_out_link').on('click', function(e){
                e.preventDefault();
                alert("edsddd");
            });
...