0

最近我被分配到一个任务，我必须制作一个将调用 ajax 的 jquery 方法。当响应来自 ajax 请求成功时，我将该响应 html 代码放在调用元素父 tr 之后。

在我的响应 HTML 中，我编写了一个 jquery 切换函数来向下滑动一些信息并将文本更改为加号到减号，反之亦然。

但它的工作很奇怪，现在当添加到它时，它工作得很好。

我正在使用 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>

现在我不清楚当删除那个live和 wirte 时.click(function()为什么它不工作？

我在 Javasript/jquery 中没有那么好听

4

3 回答 3

2

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

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

于 2013-07-18T10:23:11.977 回答
1

从现在开始，您应该让jQueryapi 文档成为您的圣经。

从jquery 1.8+开始

你必须.on()习惯bind和delegate events。

.on()

总体而言，对于它delegate的功能来说，这是非常重要的，这对于将动态内容附加或插入到您的标记中是非常重要的。

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

于 2013-07-18T10:40:27.403 回答
1

为了理解“直播”的意义，让我们举个例子：用这个页面： 

<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})
  • 在（最好的方式）：$(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 页面的根元素（通常是 document()）。

如果添加（通过 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(s) 上编写了“单击”函数，则新元素上将没有事件处理程序，并且不会执行任何操作这是因为事件通常是“附加的”到（一个）HTML 元素

但是正如您所看到的，在我的示例中的根元素上，活动持续进行，仍然存在。基本上，做“live”或“on”（更准确），会监听页面上的所有点击，当点击发生时，它会判断点击的区域是否是你想要的，从而触发你的功能，只要标签在这里或只要它听到这些点击。这就是他们所说的事件授权的意思。

“on”的最佳实践是将事件附加到一个静态元素，它是您动态获取的 HTML 的直接父级，以便只有重要的区域才能监听您的事件。

希望有帮助

于 2013-07-18T11:21:07.847 回答