问题克隆具有功能的DIV ...做一些数据抽象

我正在寻找一种方法来创建可轻松包含在各种项目中的模块。我不想只在单独的文件中使用脚本，但也需要模板定义等。由于div不能在一个单独的文件中声明，我不得不寻找另一种方式。我可以了是这样的：问题克隆具有功能的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>

起初它似乎工作。我已经在模板中声明了一个跨度。如果你点击“不！”你会得到该跨度的ID。克隆前3个似乎是行得通的，它们按照他们应该的方式在屏幕上显示出来。但后来...

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

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

来源

2011-04-23 patrick

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

而不是把功能在模板中，我定义为每一个克隆的功能，所以功能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; 
}

现在对每一个克隆即创建的点击功能再次被绑定。 .clone（true）被替换为.clone（），因为绑定到它的函数无论如何都是重新定义的。这工作就像一个魅力，但我仍然困惑为什么原始帖子中的第一个例子不起作用。存在被克隆与.clone（真）在屏幕上工作DIV，目前仍是。点击功能没有被绑定到所定义的范围...

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

来源

2011-04-23 21:39:24 patrick

问题克隆具有功能的DIV ...做一些数据抽象

回答

相关问题