додати подію для підлітків у jquery

Тільки маленька допомога для мене тут з jquery. Це моя проблема. У мене є список


the 'Delete' event click was initiation in jQuery when load page. So the issue now, i'd like to add an element

which contain children like above. I used jQuery to create the tag 'li' contain children, then 'prepend' to the 'ul'. The problem is, i can not call 'delete' event on new item. Somebody help me please
0
Будь ласка, вкажіть JavaScript, який додає li до ul та javascript, який додає слухача до Delete link.
додано Автор Matthew Graves, джерело
var contentToAdd = '
  • Назва

    Видалити
  • '; prepend (contentToAdd); Так що тепер, як я можу додати подію для "Видалити"?
    додано Автор user1597721, джерело

    8 Відповіді

    try this DEMO

    var contentToAdd = ' 
  • Name

    Delete
  •  ';
    $('ul').prepend(contentToAdd);
    
    $('ul').on('click','a', function(){
        alert('click');
    });
    
    1
    додано
    Так, трохи більше, щоб працювати, йому подобається ваш шлях var contentToAdd = '
  • Назва

    Видалити
  • '; contentToAdd = $ (contentToAdd); contentToAdd.find ('a'). натисніть (function() {// do here}); prepend (contentToAdd);
    додано Автор user1597721, джерело

    Проблема полягає в тому, що ви, швидше за все, використовуєте .click або bind ('click'), щоб приєднати обробник події натискання на елемент. Це нормально, якщо всі елементи існують у той час, коли ви додаєте подію, але якщо ви створюєте нові елементи, які відповідають тому ж селектору, вони не отримають цю подію.

    Необхідно використовувати метод delegate() або .on (), щоб приєднати подію до всіх елементів, які є поточними на сторінці, або додаються до сторінки після встановлення.

    Приклад делегата, який вловлює подію кліків і додає новий елемент, який можна натиснути, і побачити, що одна й та сама подія прикріплена до кожної нової частини DOM, яка відповідає селектору.

    $('#list').delegate('a','click',function() {
        alert('Click event fired - Adding a new element to test!');
        $('ul').append('
  • Name

    Delete
  • ');
        return false;
    });
    

    Або за допомогою нового методу .on:

    $('#list').on('click','a',function() {
        alert('Click event fired - Adding a new element to test!');
        $('ul').append('
  • Name

    Delete
  • ');
        return false;
    });
    

    $('#list') is what my example uses to denote the

    1
    додано
    haha, yerp я був збентежений, це пізно.
    додано Автор Matthew Graves, джерело
    +1 для того, щоб бути сердечним :)
    додано Автор Matthew Graves, джерело
    Неправильний, його замінено методом .on (), але лише .live() застаріло. .com/делегат .
    додано Автор JonVD, джерело
    Не проблема, я сам зробив подвійну перевірку =)
    додано Автор JonVD, джерело

    Додайте слухача натискання на UL, а не на самих себе. Таким чином, він автоматично визначатиме кліки для нових елементів.

    $(document).ready(function() {
        $("ul").on("click li > a", function() {
            $(this).closest("li").remove();
        });
    });
    
    0
    додано
    Просто інший синтаксис, але виробляє той же результат, оскільки jQuery використовує sizzle. - jsfiddle.net/ME7Yq
    додано Автор Matt MacLean, джерело
    Я використовую цей синтаксис, використовуючи Backbone, ви оголошуєте події та обробники, які використовують цей синтаксис. події: {"селектор подій": "handleClickEvent"}
    додано Автор Matt MacLean, джерело
    Ваш синтаксис неправильний, слід "click", "li> a", function() {...}
    додано Автор ta-run, джерело
    Чорт, я не знав, що :) Але добре тримати вашу подію відокремленою від вашого селектора елементів?
    додано Автор ta-run, джерело

    Ви можете спробувати це

    $("ul").on("click", "a", function(e){
        e.preventDefault();
        $(this).closest('li').remove();
    });
    
    0
    додано

    Для цього можна скористатися методом

    Метод .on() додає обробників подій до вибраного набору   елементів у об'єкті

    jQuery

    $(document).on("click", "ul li a"), function(){
        //your code here
    });
    

    Посилання на тестування

    0
    додано

    подивіться на цей приклад jQuery:
    (один з останніх прикладів http://api.jquery.com/on/ )

    <!DOCTYPE HTML>
    <html>
    <head>
      
      <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    </head>
    <body>
      
    Click me! <script> var count = 0; $("body").on("click", "p", function(){ $(this).after("
    Another paragraph! "+(++count)+""); }); </script> </body> </html>

    це означає, що у вашому випадку вам потрібно

    $("ul").on("click", "a", function(e){
       //delete logic goes here
    })
    
    0
    додано
    Так, я можу знати це. Але ця подія було оголошення при завантаженні сторінки. Так з моєю проблемою, я створюю
  • ....
  • в jquery. Наприклад: var abc = '
  • Назва

    Видалити
  • '; Так як я можу додати подію для елемента a?
    додано Автор user1597721, джерело
    Why dont you use jQuery templating.
    You can define a text/template and iterate over it to get your desired result.
    an example:
    **THIS IS YOUR SCRIPT**
    <script id="movieTemplate" type="text/x-jquery-tmpl">
        
  • ${Name} was released in ${ReleaseYear}.
  • </script>
    
    **THIS IS THE jQuery TEMPLATE**
    <script type="text/javascript">
        var movies = [
            { Name: "The Red Violin", ReleaseYear: "1998" },
            { Name: "Eyes Wide Shut", ReleaseYear: "1999" },
            { Name: "The Inheritance", ReleaseYear: "1976" }
        ];
    
       //Render the template with the movies data and insert
       //the rendered HTML under the "movieList" element
        $( "#movieTemplate" ).tmpl( movies )
            .appendTo( "#movieList" );
    </script>
    
    **THIS IS YOUR HTML**
    
      
      

      More examples : http://blog.reybango.com/2010/07/09/not-using-jquery-javascript-templates-youre-really-missing-out/

      0
      додано

      Добре, враховуючи, що ".on" не відповідає вашим вимогам, можливо, щось подібне:

      $element = $('
    • Name

      Delete
    • ');
      $element.find("a").click(function(){ 
          //call your delete function
      })
      
      $("ul").prepend($element);
      
      0
      додано
      ІТ КПІ - JavaScript
      ІТ КПІ - JavaScript
      504 учасників

      співтовариство javascript розробників в Telegram