Манипулирование данные динамических HTML-теги Jquery

Question

У меня есть этот код,

$('#gogo').click(function(e){ 

    var data='<a href="http://www.google.com" class="myButtons">Google</a><a href="http://www.microsoft.com" class="myButtons">Microsoft</a>"; 
      $("#showResults").html(data); 

    }); 


    $(".myButtons").click(function(e) { 
     e.preventDefault(); 
     alert($(this).attr("href")); 
     $("#result").attr("src", $(this).attr("href")); 
    }); 


<button id="gogo">Click me</button> 

<div id="showResults"></div> 

<iframe id="result" name="result" src="" width="750px" height="450px" frameBorder="0"></iframe> 

Я задавался вопросом, почему он не работает. Возможно, это потому, что нет обработчика событий новых добавленных тегов html?

Я не хочу использовать «результат» мишень =

Спасибо.

Answer 1

Ваш код не является обязательным прослушивателем событий для динамически созданных dom-узлов. Проверьте мое решение:

$('#gogo').click(function(e){ 
 
    var data='<a href="http://wikipedia.org" class="myButtons">Wikipedia</a><a href="http://www.microsoft.com" class="myButtons">Microsoft</a>'; 
 
    $("#showResults").html(data); 
 
}); 
 

 

 
$("body").on("click", ".myButtons", function(e) { 
 
    e.preventDefault(); 
 
    alert($(this).attr("href")); 
 
    $("#result").attr("src", $(this).attr("href")); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<button id="gogo">Click me</button> 
 

 
<div id="showResults"></div> 
 

 
<iframe id="result" name="result" src="" width="750px" height="450px" frameBorder="0"></iframe>