jQuery的html的（）更新等功能停止工作 [英] on jQuery .html() update, other functions stop working

问题描述

我一定是可排序的我的网站页面。他们还自动更新到数据库。

在我的里列表进行排序，一个PHP页面被称为是重新排序的页面，然后我叫的.html（数据）来更改显示页面上的页面的顺序。

这样做了以后，但是，在我的JavaScript我的自动更新功能停止工作。

有一个＃Form1中的作品排序发生和 html的（数据）调用之前。一旦它被调用时，previous ＃Form1中获取删除内容并重新添加到页面。这是当它停止工作。

有谁知道推理呢？

我的更新脚本<​​/ STRONG>

  $（＃reportNav）。排序（{
    停止：功能（事件，UI）{
        VAR POSTDATA = $（本）.sortable（'序列化'）;
        VAR URL =saveOrder.php;
        $阿贾克斯（{
            键入：POST，
            网址：网址，
            数据：POSTDATA，
            成功：功能（数据）{$（'＃reportContainer）HTML（数据）; }，
            错误：功能（数据）{$ changesSaved.text（无法​​再订购页面。）; }
        }）;
    }
}）;
 

什么停止工作/停止被称为

  VAR timeoutId;
$（'＃Form1的）。在（'输入propertyChange在变化，函数（）{
   clearTimeout（timeoutId）;
    timeoutId = setTimeout的（功能（）{
    //运行的最后一次更改后1秒（1000毫秒）
    $（＃窗口1）提交（）。
   }，1000）;
 }）;
 

解决方案

可能是一个过度写你的元素已经处理约束的情况下，在这种情况下，你需要事件委派：

  $（'＃reportContainer'）。在（'输入propertyChange在变化，＃form1的'，函数（）{
 

I have certain "pages" on my website that are sortable. They also auto update to a database.

After my li list is sorted, a php page is called that re-orders the "pages" and then I call .html(data) to change the order of the pages that are displayed on the page.

After doing this, however, my auto update functions in my javascript stop working.

There is a #form1 that works before the sort takes place and the .html(data) is called. Once it is called, the previous #form1 get's removed and re-added to the page. This is when it stops working.

Does anyone know the reasoning for this?

My update script

$("#reportNav").sortable({
    stop : function(event, ui){
        var postData = $(this).sortable('serialize');
        var url = "saveOrder.php";
        $.ajax({
            type: "POST",
            url: url,
            data: postData,
            success: function(data) {  $('#reportContainer').html(data); },
            error: function(data) { $changesSaved.text("Could not re-order pages."); }
        });
    }
});

What stops working/stops being called

var timeoutId;
$('#form1').on('input propertychange change', function() {
   clearTimeout(timeoutId);
    timeoutId = setTimeout(function() {
    // Runs 1 second (1000 ms) after the last change  
    $("#form1").submit();
   }, 1000);
 });

解决方案

Probably a case of over-writing your elements that has handlers bound, in which case you need event delegation:

$('#reportContainer').on('input propertychange change', '#form1', function() {

这篇关于jQuery的html的（）更新等功能停止工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！