2

我有一些由 jQuery 插入的 DIV。结构是这样的：

<div class="preview_images" id="preview_upload">
     <div class="image_box" id="img_box8793">
         <p>
            <img class="count_19" src="[...]">
            <br>
             <span class="del_img">löschen</span>
         </p>
     </div>
</div>

在使用 live() 之前，我想使用 on() 函数。这是我的 jQuery 函数：

$('#preview_upload div p').on("click", "span", function () {
    alert('###');
    parent_div_id = $(this).parent().parent('div').attr('id');
    $(this).parent().parent('div').fadeOut('slow');
    $('#final_img_prev #' + parent_div_id).remove();
    del_val = $(this).attr('title');
    $('#customfields-tf-150-tf,#customfields-tf-16-tf, #customfields-tf-17-tf, #customfields-tf-18-tf, #customfields-tf-19-tf').each(function () {
        if ($(this).val() == del_val) {
            $(this).val('');
            var img_count = jQuery.cookie('img_count');
            new_img_count = parseInt(img_count) - 1;
            if (new_img_count > 0) {
                jQuery.cookie('img_count', '', {
                    expires: -1
                });
                jQuery.cookie('img_count', new_img_count, {
                    expires: 1
                });
                if (new_img_count < 4) {
                    new_file = '<input type="file" id="file1" name="file1">';
                    $('#uploadForm .file_box').html('');
                    $('#uploadForm .file_box').html(new_file);
                    $('#uploadForm').fadeIn();
                }
            }
            return false;
        }
    });
});

alert() 没有被解雇。

错误在哪里？

编辑：

这是您回答后的代码：

jQuery(function($){
   $(document).ready(function() {
      $('#preview_upload div p').on("click", "span", function(){
            alert('###');
      });
   });
)};

我正在使用 Jquery 1.7.2。Firebug 没有显示错误。不会触发 alert()。

也许是因为 DIV 及其内容是动态创建的？

4

3 回答 3

3

使用时on，事件应该从元素的静态父元素之一委托，div#preview_upload是动态生成的，因此您应该选择另一个元素，如bodyordocument对象来委托事件，试试这个：

$(document).on("click", "#preview_upload span", function(){
   // ..
})
于 2012-08-14T17:40:38.950 回答
1

将此代码包装在文档ready事件中，它工作正常

$(function(){

   $('#preview_upload div p').on("click", "span", function(){
       alert("working")   
      //your code

   });

});

工作样本：http: //jsfiddle.net/HBunv/

如果这不起作用，请检查页面中的其他脚本错误。Firebug 控制台将有助于找出什么是脚本错误

于 2012-08-14T17:35:44.010 回答
0

我认为您要么拥有过时的 jQuery 版本（低于 1.7），要么在内容加载到 DOM 之前运行代码，这意味着您需要$(document).ready(function().

您的代码在下面的示例中运行良好，并且警报正在触发！

请检查有效的jsFiddle 示例。

于 2012-08-14T17:38:03.037 回答