如何使用jQuery動態生成html小部件？

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

好吧，您可以使其與類（而不是Ids）一起使用，從而可以添加具有相同功能的多個小部件

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

這是一個僅用於添加HTML 的小提琴。如果您以后想修改小部件，可以加載外部html而不是創建它。

如何使用jQuery動態生成html小部件？

問題描述

1 個解決方案

解決方案1
1 已采納 2014-05-30 14:56:12

如何使用jQuery動態生成html小部件？

問題描述

1 個解決方案

解決方案1 1 已采納 2014-05-30 14:56:12

解決方案1
1 已采納 2014-05-30 14:56:12