Question

我想要在我的页面上显示一个交互式小部件。但是，我还想让用户生成相同小部件的更多实例，并能够同时与它们进行交互。举个例子，假设这是我的小部件：

<div id="my_widget">
    <script type="text/javascript" src="jquery-1.5.1.js"></script>
    <script>
    $(document).ready(function() {
        $("#up_one").click(function() {
            $("#number").val(parseInt($("#number").val())+1);
            });
    });

</script>
    <p>
        <input type="submit" id="up_one" value="Up One!"/>
        <input type="text" id="number" type="number" value="0" maxlength="2">
    </p>
</body>

现在，要在我的主页面上显示它，我使用load（），如下所示

$(document).ready(function() {
    var i = 0;
    $("#hello_submit").click(function() {
       $("#hello_div").load("widget_test.html");
    });
});
</script>
<div id="hello_div">
    <p>
        <input id="hello_submit" type="submit" value="New counter" />
    </p>
</div>

但这有两个问题。首先，我只能加载小部件一次，其次，它将允许用户直接导航到widget_test.html，这将破坏所有这一切的目的。所以我尝试了另一种方法，包括将小部件转换为长字符串。在这个字符串中，我添加了一个索引参数，用于动态生成id和类名，如下所示：

function BAString(){
    this.getBas = function(value){
        var bas =  '<body><script>$(document).ready(function() {$("#up_one'+value+'").click(function() {\
               $("#number'+value+'").val(parseInt($("#number'+value+'").val())+1);});}); </script> <p>\
               <input type="submit" id="up_one'+value+'" value="Up One!"/>\
               <input type="text" id="number'+value+'" type="number" value="0" maxlength="2"></p></body>';
       return bas;
   };

在我的主页面中，我然后使用此功能：

 $(document).ready(function() {
        var i = 0;
        $("#hello_submit").click(function() {
         var b = new BAString();
          $("#hello_div").append(b.getBas(i));
          i++;
        });
    });

第二种方法看起来效果很好，但随着我的小部件变得越来越复杂，我可以看到明显的可维护性问题。那么在这种情况下使用的理想解决方案是什么？

Answer 1

嗯，你可以使用它而不是ID 这样你可以添加多个具有相同功能的小部件

$(document).ready(function() {
    $(document.body).on( "click", ".up_one" ,function() {
        $x = $(this).siblings('.number');
        $x.val(parseInt($x.val())+1);
    });
});

Here's a fiddle仅适用于添加HTML 如果你想在将来修改小部件，你可以只加载外部html而不是创建它

如何使用jQuery动态生成html小部件？

1 个答案: