用ajax加载后无法在DOM中找到元素(想要将jquery插件绑定到它)

Question

所以我有2个html页面.1用作容器,1用作内容.当我用表格加载内容页面时,我可以使用拖放操作.

但是当我转到我的容器页面并将内容页面加载到带有ajax的div时,拖放工作就停止了.内容页面中的所有其他JavaScript功能仍然有效.如何将jquery dnd插件绑定到加载ajax的表？

我正在使用拖放作为教程http://isocra.com/2008/02/table-drag-and-drop-jquery-plugin/

我的代码看起来像这样:

$(window).load(function()
{   if(temp == 0)
    { 
        DP("eerste keer")
        load_table(); 
        temp = 1;
    }
} );

function load_table()
{    
    DP('load_table');
    $.ajax({
            //async: false,
            type: "POST",
            url: "/diagnose_hoofdpagina/table_diagnose/" + DosierID, // <== loads requested page
            success: function (data) {
                    $("#diagnoses_zelf").html(''); //<== clears current content of div
                    $("#diagnoses_zelf").append(data).trigger('create'); // <== appends requested page
                },
            error: function(){
                alert('error');
              } 
        }).done(function() {
        update_table(); 
        initialize_table();    // <== calls jquery plug in
        });

    return false;   
}


function initialize_table() 
{
    var tableid = $('#diagnoses_zelf table').attr('id'); //< this finds the correct table thanks to Fábio Batista => this option worked, rest didn't
    alert(tableid);
    $(tableid).tableDnD({    
        onDrop: function(table, row) {
        alert(table + "     "  +  row);

        },
        onDragStart: function(table,row){
        var tette = $(row).index;
        alert(tette);
        },
        dragHandle: ".dragHandle"
    });     
}

这怎么可能,我该怎么办呢？任何人都可以帮我这个.

非常简短:我希望使用ajax访问我加载到容器页面中的表的ID,并使用jquery拖放插件.

编辑

发现:

不知怎的,我在容器页面中的表被重命名为pSqlaTable而不是我在控制器页面中给它的id.

<table id="tableDiagnose" class="table table-hover">

这就是为什么代码无法找到表annymore由于FábioBatista而被此代码修复:

$('#diagnoses_zelf table').tableDnD( ... );

,但我现在如何使用dnd插件？

它现在找到了表,但是我仍然无法将dnd插件绑定到它,我能够将jquery插件绑定到ajax加载的表吗？

编辑

//drag & drop http://isocra.com/2008/02/table-drag-and-drop-jquery-plugin/
function initialize_table() 
{
    var tableid = $('#diagnoses_zelf table').attr('id');
    alert(tableid);
    $('#' + tableid).tableDnD({    
        onDrop: function(table, row) {
        alert(table + "     "  +  row);

        },
        onDragStart: function(table,row){
        alert('issemer?');
        },
        dragHandle: ".dragHandle"
    });    
} 

这是我仍然坚持的代码.tableid是正确的,但jquery的初始化不是.我不能拖着桌子上的瞌睡.我的语法错了吗？

编辑

难道我无法将jquery绑定到表中,因为我使用ZPT(或javascript)动态生成另一页上的表吗？

Answer 1

插件的问题.

你正在混合许多外部库和代码.这导致版本之间可能存在不匹配,并且代码中存在大量黑盒.

作为开发人员,这会让你感到非常不安.拥有您在代码库中无法完全理解的代码可能会非常快速地令人沮丧.

替代方案.

通常,这些插件提供了我们的功能,因为JavaScript开发人员可以在没有它们的情况下轻松完成.在简单的场景中,这个开发过程让我们可以创建我们理解的代码并更容易维护.我们不仅从这个过程中学习,而且还创建了一小部分特定代码.社区驱动的解决方案总的来说非常好,但重要的是要记住它们不是灵丹妙药.通常你会被一个不那么活跃的项目所困扰,因为你的具体案例有一个bug,你必须深入挖掘一个庞大的,不熟悉的代码库.

你的代码

那么这个拖放插件有什么作用呢？

好吧,我将其分解如下:

• 听在mousedown上表中的行事件
• 当这样的事件触发时,开始移动表格行以匹配鼠标位置
• 当mouseup发生时,检测到,并最终确定位置.

让我们看看我们如何做类似的事情.我们假设表的HTML是这样的:

<table>
    <tbody>
    <tr>
        <td> Hello 1</td>
    </tr><tr>
        <td> Hello 2</td>
    </tr>
    </tbody>
</table>

这是一个表的小提琴,应用了一些基本的样式

接下来,我们将听取选择事件.我们将向表行添加一个事件以供选择,并将文档添加到鼠标启动时的文档中.jQuery具有此类事件的事件侦听器.由于我们希望这些事件在AJAX之后仍然存在,我们将使用.on它来让我们使用委托事件..on意味着即使我们稍后向表中添加内容,也无关紧要.

var selected; // currently selected row
$(document).on("mousedown","#MySpecialTable tr",function(){
   $("#textDiv").text(this.textContent); 
    selected = this;
});
$(document).on("mouseup",function(){
    $("#textDiv").text("Left "+selected.textContent); 
    selected = null;
});

这是这种代码的工作小提琴.

现在,我们希望实际上将拖放更改为工作时,即将当前位置更新为反映鼠标位置的位置.我们可以听取mousemove事件,并检测我们当前所在的元素.就像是

$(document).on("mousemove",function(e){
    $("#textDiv").text($(e.target).html());
});

你可以在这看到一个工作小提琴

这很好,但我们想要实际改变元素位置.所以我们需要更改表结构以允许它.我们可以删除元素,并将其附加到正确的位置.我们将检查是否有选定的元素,如果我们这样做,我们可以跟踪它与mousemove事件中的当前元素进行比较.我们可以为初学者检测我们是否应该使用以下内容进行拖动:

$(document).on("mousemove",function(e){
    if(selected !=null){// got an element selected
        if($("#MySpecialTable").has(e.target).length > 0){ //in the table
            $("#mousePos").text("DRAGGING");    
        }
    }else{
        $("#mousePos").text("NOT SELECTED");
    }
});

(小提琴)

现在,我们将添加实际选择,当目标不是我们的元素时,我们将替换元素,并且我们在表中.我们的完整代码应该是这样的:

var selected;
$(document).on("mousedown","#MySpecialTable tr",function(e){
    e.preventDefault();//stop the text selection;
   $("#textDiv").text(this.textContent); 
    selected = $(this);
    selected.find("td").css("background-color","#999");
});
$(document).on("mouseup",function(){
    $("#textDiv").text("Left "+selected.text()); 
    selected.find("td").css("background-color","");
    selected = null;
});
$(document).on("mousemove",function(e){
    if(selected !=null){// got an element selected
        if($("#MySpecialTable").has(e.target).length > 0){ //in the table
            var el = $(e.target).closest("tr");//the tr element we're on
            el.before(selected);// replace the elements
        }
    }else{
        $("#mousePos").text("NOT SELECTED");
    }
});

$("#MySpecialTable").on('selectstart', false);//Don't let the user select the table

(小提琴)

现在,到目前为止,我们只有几行代码,这很好,因为我们确切地知道发生了什么,并且不需要使用我们不完全理解的许多外部代码行.

但它会是AJAX吗？

让我们用AJAX将数据加载到表中,看看!我们将使用一个模拟AJAX响应来setTimeout允许我们模拟异步请求.我们会用的

setTimeout(function(){
    $("#MySpecialTable").html("<tr><td> Hello 1</td></tr><tr><td> Hello 2</td></tr><tr><td> Hello 3</td></tr><tr><td> Hello 4</td></tr><tr><td> Hello 5</td></tr><tr><td> Hello 6</td></tr>");
},1000);

这意味着,#MySpecialTable在一秒钟后更新HTML .让我们看看它是否有效？

那它为什么有效呢？好吧,我们使用委托事件,这意味着我们不关心我们正在加载的元素是否现在在屏幕上.我们有这样做的洞察力,因为我们自己构建了代码并知道我们的最终目标是什么.剩下要做的就是清理一下代码.

我们将代码包装在下面,以防止$在非冲突模式下成为问题(也就是说,$已经在页面中采用:

(function($){

})(jQuery);

接下来,我们将为table事件添加一个绑定:

$.GertVDragTable = function(elementSelector){ // rest of code.

最终,我们的代码可能看起来像这样.

使用它,将是一个简单的$.GertVDragTable("#MySpecialTable");替代,我们可以把它,$.fn并允许每个函数调用它.这是一个品味问题.

请不要复制意大利面:)如果你停在每一个舞台上,我会很感激,并想想下一步是为什么采取的.