2

ボタンクリック機能に基づいてウィジェットを追加または削除しようとしています。それは機能しますが、関数が呼び出されると、HTMLページのボタンクリックだけでなく、マウスクリックでコードが呼び出されるという奇妙なことをします。したがって、html ページの削除ボタンをクリックすると、そのウィジェットは削除されますが、(ボタンではなく) 他のウィジェットをクリックすると、そのウィジェットは削除されます。マウスのクリックではなく、htmlボタンのクリックで呼び出される関数のみが必要です。ボタンがページ上の何かを初期化して、マウスのクリックで削除機能を呼び出すようなものです。なぜこれが起こっているのか、どうすれば修正できるのか、誰でも説明できますか? 以下の私のコード：

function deleteWidget() {
    var gridster = $('.gridster ul').gridster().data('gridster');
    $(document).on( "click", ".gridster ul li", function() {
        $(this).addClass("activ");
        gridster.remove_widget($('.activ'));
    });
    }

    function addWidget() {
    var gridster = $(".gridster ul").gridster().data('gridster');
    $(document).on("click", ".gridster ul li", function() {      
        gridster.add_widget('<li class="gs_w">The HTML of the widget...</li>', 2, 1);
    });
    }

<li data-row="1" data-col="4" data-sizex="1" data-sizey="1" class="gs_w"><button onclick="addWidget()" style="float: right;">+</button><h3>4</h3><span class="gs-resize-handle gs-resize-handle-both"></span></li>
<li data-row="1" data-col="6" data-sizex="1" data-sizey="1" class="gs_w"><button onclick="deleteWidget()"style="float: right;">-</button><h3>6</h3></li>

助けてくれてありがとう！

4

2 に答える 2

4

削除ボタンをクリックすると、コードは任意のウィジェットをクリックするバインドを作成し、コードを実行してそれを削除します。

$(document).on( "click", ".gridster ul li", function() {
        $(this).addClass("activ");
        gridster.remove_widget($('.activ'));
    });

html を次のように変更してみてください。

<li data-row="1" data-col="4" data-sizex="1" data-sizey="1" class="gs_w"><button class="delete-button" style="float: right;">+</button><h3>4</h3><span class="gs-resize-handle gs-resize-handle-both"></span></li>
<li data-row="1" data-col="6" data-sizex="1" data-sizey="1" class="gs_w"><button class="add-button" style="float: right;">-</button><h3>6</h3></li>

そして、JavaScript コードで、gridster を初期化した後、以下を追加します。

$(document).on( "click", ".gridster .delete-button", function() {
    var gridster = $(".gridster ul").gridster().data('gridster');
    gridster.remove_widget($(this).parent());
});

$(document).on("click", ".gridster .add-button", function() {
    var gridster = $(".gridster ul").gridster().data('gridster');      
    gridster.add_widget('<li class="gs_w">The HTML of the widget...</li>', 2, 1);
});

それが役に立てば幸い。

于 2014-05-14T11:44:54.690 に答える
1

以下は、グリッドスター グリッドにウィジェットを追加するために必要な jQuery と HTML です。

jQuery:

$(document).on( "click", "#addWidgetButton", function(e) {
    e.preventDefault(); 
    gridster.add_widget.apply(gridster, ['<li>new</li>', 1, 2]);
});

HTML:

<button id="addWidgetButton" style="float: right;">+</button>
于 2015-10-19T14:27:41.340 に答える