Question

我一直在寻找一种方法来创建可以轻松包含在各种项目中的模块。我不想只在单独的文件中编写脚本，而且还需要模板定义等。由于div不能在单独的文件中声明，我不得不寻找另一种方式。我能想到的是：

<head>
<title>DOMtest</title>

<script src='http://code.jquery.com/jquery-1.5.js'></script>

</head>

<body>
<script>

$(document).ready( function() {

    $("#holder").load( "template_link.html", function() {
        $("#test").append( clonelink( 1 ) );
        $("#test").append( clonelink( 2 ) );
        $("#test").append( clonelink( 3 ) );
    });

    $("#testbutton").click( function() {
        $("#test").append( clonelink( 4 ) );
    });


});
</script>

<div id='test' style='border: 1px solid black'>
<input type='button' id='testbutton' value='give me another clone'/>
</div>


<div id='holder' style='border: 1px solid black'>
</div>

</body>
</html>

然后，在一个名为template_link.html的单独文件中，我有以下内容：

<script src='http://code.jquery.com/jquery-1.5.js'></script>

<div id='template_link'>
    This is a template<br />
    Let's see if this works or <span class='link_clicktest'>not</span>!
</div>

<script>

$("span.link_clicktest").click( function() {
    $d = $(this).closest( "div.link" );

    alert( "span " + $d.attr( "id" ) + " was clicked" );
});

function clonelink( $id ) {
    $c = $("#template_link").clone( true );
    $c.attr( "id", $id );
    $c.addClass( 'link' );

    alert( $id + "-" + $c.html() );
    return $c;
}

</script>

起初它似乎有效。我在模板中声明了一个span。如果你点击“不！”你会得到那个跨度的ID。克隆前3个似乎有效，它们按照预期的方式显示在屏幕上。但是......然后......

我点击那里的按钮“给我另一个克隆”。确实创建了克隆。通过clonelink-function中的警报，我可以看到ID到达那里。但即使在.clone（）中启用了'true'选项 - 调用它似乎也没有克隆span的功能。

我是在监督某些事情，还是在尝试做一些不能以这种方式完成的事情？

Answer 1

我想出了一个解决方法......

我没有将功能放在模板中，而是为每个克隆定义了函数，因此函数clonelink更改为：

function clonelink( $id ) {
    $c = $("#template_link").clone();
    $c.attr( "id", $id );
    $c.addClass( 'link' );

    $c.find(span.link_clicktest").click( function() { 
        $d = $(this).closest( "div.link" );
        alert( "span " + $d.attr( "id" ) + " was clicked" );
    });

    alert( $id + "-" + $c.html() );
    return $c;
}

现在，对于每个创建的克隆，再次绑定click函数。 .clone（true）替换为.clone（）'因为无论如何重新定义绑定到它的函数。这就像一个魅力，但我仍然困惑为什么原帖中的第一个例子不起作用。屏幕上有一个工作的DIV，用.clone（true）克隆，但.click-function还没有绑定到定义的范围......

如果有人有更优雅的解决方案，我会很高兴听到它。另外，我想知道为什么第一个例子不能正常工作......

克隆具有功能的DIV ...进行一些数据抽象

1 个答案: