Question

最近我被分配到任务，我必须在其中创建一个调用ajax的jquery方法。当从ajax请求成功响应时，我将响应html代码放在调用元素parent tr。

之后

在我的回复HTML中，我编写了一个jquery切换功能，可以向下滑动一些信息并将文本更改为加号到负号，反之亦然。

但它很奇怪，现在当它添加 live 时它就完美了。

我正在使用jquery 1.7。

这是我的代码

这是主页中的ajax

<script type="text/javascript" >
                            $(document).ready(function() {


                                $('.loadCampaign').click(function(e) {
                                    //e.preventDefault();
                                    var campId = $(this).attr('id');
                                    var arr = campId.split('_');
                                    campId = arr[1];
                                    var parentTrId = '#campaign_tr_' + campId;
                                    var cBodyClass = campId + '-cBody';
                                    var body = $('.' + 'trView_' + campId);

                                    if (body.length) {
                                        body.remove();
                                    } else {
                                        $.ajax({
                                            //dataType: "json",
                                            url: '{{config.adminUrl}}/campaign/loadCamapaignDetails',
                                            data: {'id': campId},
                                            type: 'get',
                                            success: function(jd)
                                            {
                                                if (jd !== '0') {
                                                    $(parentTrId).after('<tr id="view_content" class="even ' + cBodyClass + ' trView_' + campId + '">' + jd + '</tr>');
                                                } else {
                                                    alert('Your request can not be process! Please refresh the page and try again')
                                                }

                                            }
                                        });
                                    }

                                });
                            });

</script>

现在这个是用ajax响应写的：

<script type="text/javascript" >
function showHideDate(id){
    $('#showHideDate_'+id).toggle(function(){
        $("#bookedDates_"+id).slideDown(
         function(){
           $('#showHideDate_'+id).text("-")
         }
       );
   },function(){
       $("#bookedDates_"+id).slideUp(
       function(){
           $('#showHideDate_'+id).text("+")
       }
       );
   });     
};

$(document).ready(function(){
$('.plus').live('click',function(){
        var id=$(this).attr('id');
        var idArr=id.split('_');
        id=idArr[1];
        //alert(id);
        showHideDate(id);
});


});

</script>

现在我不清楚当删除直播并将其作为.click(function()时，为什么它不起作用？

我在Javasript / jquery

中声音不大

Answer 1

.live()生成所谓的委托事件处理程序，它在第一次加载站点后将其挂钩到有问题的元素+动态生成的元素。 .click()完成了从一开始就存在的元素。

但是，.live()已被弃用，您应该使用.on()代替。

Answer 2

你应该尽可能地将jQuery api文件作为你的圣经。

从 jquery 1.8 +

开始

您必须.on()使用bind和delegate events。

.on()

对于delegate功能来说非常重要，这对于在标记中附加或插入动态内容是很重要的。

在这里查看： http://api.jquery.com/on/

Answer 3

要理解“直播”的观点，让我们举个例子：有这个页面：

<html>
   <body>
     <div class=".myDiv"></div>
   </body>
</html>

简单的页面对吗？如果您使用如下所示的块视图：

+--------
|<body>
|   +----
|   |<div class="myDiv">

当您将事件附加到html中的元素时，它们会自行“附加”自己：让我们以.myDiv

上的点击事件为例

正常点击：$('.myDiv').click(function(){//do something})
实时点击（已弃用）：$('.myDiv').live('click', function(){//do something})
on（最佳方式）：$(body).on('click','.myDiv', function(){// do something})

他们代表自己是这样的：

+--------+
|<body>  <- Event Click on .mydiv ex: ( $('.myDiv').live('click')
|                                    Or $(body).on('click','.mydiv'))
|
|
|    +--------
|    | <div .myDiv> <- Event Click ex: ($('.myDiv').click())
|    |
|    +--------
|
+----------

现在您可以看到，当您使用.live时，该事件会将您自己附加到您的html页面的根元素（通常是文档（））。

如果你添加（通过ajax）一个新的html元素：

+--------+
|<body>  <- Event Click on .mydiv ex: ( $('.myDiv').live('click')
|                                    Or $(body).on('click','.mydiv'))
|
|
|    +--------
|    | <div .myDiv> <- Event Click ex: ($('.myDiv').click())
|    |
|    +--------
|       vv
|    +--------
|    | <div .myDiv> -> Yay ! I'm new from ajax
|    |
|    +--------
|
+----------

如果您在从Ajax获取新元素之前已在.myDiv上编写了“click”函数，则新元素将不会包含事件处理程序，并且将不执行任何操作那是因为一个事件通常“附加”到（一个）HTML元素

但正如您所看到的，在我的示例中的根元素上，事件仍然存在。基本上，进行“实时”或“开启”（更精确），将听取页面上的所有点击，当点击发生时，它将确定点击的区域是否是您想要的区域，从而触发您的功能，只要标签在这里或只要它听取这些点击。这就是事件授权的意思。

“on”的最佳做法是将事件附加到静态元素静态，这是动态获取的HTML的直接父级，因此只有重要的区域才能听取您的事件。

希望有所帮助

Jquery / Javascript如何在动态内容更新上表现？

3 个答案: