Блог

Главная - Вопросы по программированию - Как вызвать событие щелчка, если селектор загружен из внешнего

Как вызвать событие щелчка, если селектор загружен из внешнего

#javascript #jquery

#javascript #jquery

Вопрос:

У кого-нибудь есть подобный опыт? Я хотел бы загрузить внешний файл на текущую страницу с помощью функции .load(«…»). После загрузки, как я могу вызвать щелчок по изображению в <div id=»tab-3-list»>?

Сценарий 

 $("#tab-3-list img.coupon_list").on("click", function (e) {}

не работает. Если я вставлю содержимое list.html в текущем теле работает приведенный выше сценарий.

 <html lang="en" class="ui-mobile">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">

</head>
<section id="home" data-role="page">
    <article data-role="content">
        <div id="home-content"></div>
    </article>
    <!-- content -->
</section>
<!-- home -->

<script type="text/javascript">
    $(document).ready(function() {
        $("#home-content").load("list.html");
        $("#tab-3-list img.coupon_list").on("click", function (e) {
            e.preventDefault();
            window.alert(this.id);
        });
    });
</script>
</body>
</html>

Внешний файл list.html

     <div id="tab-3-list">
        <div class="ui-grid-a">
            <div class="ui-block-a">
                <img id="c01" class="coupon_list" src="/images/coupon/c01.png">
            </div>
        </div>
        <!-- /ui-grid-a -->
    </div>
    <!-- /tab-3-list -->

Ответ №1:

Попробуйте использовать event-delegation в этом контексте, поскольку вы загружаете элементы DOM во время выполнения,

 $("#home-content").on("click","#tab-3-list img.coupon_list",function (e) {
  e.preventDefault();
  alert(this.id);
});

Ответ №2:

попробуйте это..

 <script type="text/javascript">
    $(document).ready(function() {
        $("#home-content").load("list.html", function(){
 $("#tab-3-list img.coupon_list").on("click", function (e) {
            e.preventDefault();
            window.alert(this.id);
        });
});

    });
</script>

Комментарии:

1. да… но событие загрузки домашнего содержимого записывается в событие DOM ready.. так что определенно привязывается один раз к dom ready..

Ответ №3:

load использует ajax и, следовательно, требуется некоторое время для загрузки данных с внешней страницы. Когда вы подключаетесь click event к img.coupon_list , он даже не присутствует в DOM (на странице).

Попробуйте это,

 $("#home-content").load("list.html", function () {
        $("#tab-3-list img.coupon_list").on("click", function (e) {
            e.preventDefault();
            window.alert(this.id);
        });
});

Это прикрепляется click только тогда, когда данные из load возвращаются и добавляются в DOM.

Комментарии:

1. А что, если в будущем OP изменил свой код, чтобы вызвать эту функцию загрузки, которая будет выполняться нажатием кнопки, чтобы сделать эту страницу динамической ..?

2. Это избыточно, что, если OP решит закрыть этот проект? : D. Мы всегда можем off click использовать его перед использованием on . Тем не менее, ваш ответ совершенно верен 🙂 1 на это

3. @Jashwant ха-ха … 🙂 В принципе, я хотел бы использовать / предложить постоянное / конкретное решение такого рода проблем. Вот почему я просто настаивал на том же для вас..

Ответ №4:

Используйте делегирование события — .on(), а для запуска события щелчка используйте .trigger()

 $(document).ready(function() {

    $("#home-content").load("list.html",
        function(){ 
           $('#tab-3-list img.coupon_list').trigger('click');
    });
    $("#home-content").on("click","#tab-3-list img.coupon_list", function (e) {
        e.preventDefault();
        window.alert(this.id);
    });
});

Комментарии:

1. в качестве примечания вы должны стараться избегать использования on on document . Это причина live , по которой он устарел.

2. Да, вы правы. #home-content относится к этому вопросу. Итак, чтобы получить его общий добавленный документ. Обновил мой ответ.

Ответ №5:

 -just put event in live mode , it's work after reload :

<script type="text/javascript">
    $(document).ready(function() {
           $("#home-content").load("list.html");

            $("#home-content").one("load",function(){
           //  everytime an image finishes loading    
       }).each(function () {
        if (this.complete) {

         // manually trigger load event in
        // event of a cache pull
         $(this).trigger("click");
        }
      });          

       $("#home-content #tab-3-list img.coupon_list").live("click", function (e) {
            e.preventDefault();
            window.alert(this.id);
        });
    }); </script>

Комментарии:

1. Пожалуйста, следуйте за новым

2. Я использую оба jquery-1.9.1.min.js и jquery.mobile-1.4.2.min.js но .live() не определено, в какой версии jquery и jquery.mobile требуется иметь функцию .live()?

3. Пожалуйста, используйте последнюю версию jquery с сайта.