Hinzufügen/Entfernen einzelner widgets aus gridster

Ich versuche, hinzufügen und oder entfernen Sie ein widget, basierend auf einen button-Klick-Funktion. Es funktioniert, aber sobald die Funktion aufgerufen wird, sobald es nicht etwas seltsam, wo der code aufgerufen wird, auf jeden Mausklick, anstatt nur eine Taste, klicken Sie auf die html-Seite. Also wenn ich klicken Sie auf die Schaltfläche "entfernen" auf der html-Seite wird es zu entfernen, das widget aber dann, wenn ich Sie auf einen anderen widget (nicht auf eine Schaltfläche), die es noch entfernt das widget. Ich will nur die Funktion, die aufgerufen wird, die auf den html-button klicken, nicht jeden Mausklick. Es ist wie die Taste ist die Initialisierung etwas auf die Seite, um jeden Mausklick rufen Sie die entfernen-Funktion. Kann mir jemand erklären, warum das passiert ist und wie ich es beheben kann? Meine folgenden code:

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>

Danke für jede Hilfe!!!

InformationsquelleAutor Trevor | 2014-05-09
  1. 4

    Wenn Sie klicken Sie auf Ihre Schaltfläche löschen, dein code ist die Schaffung einer Bindung, die keine macht, klicken Sie auf ein beliebiges widget, führen Sie den code, um es zu entfernen.

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

    Können Sie versuchen, ändern Sie Ihre html zu:

    <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>

    und in Ihrem javascript-code, nach der Initialisierung gridster hinzufügen:

    $(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);
});

    Hoffe, es hilft.

    • Ah, macht Sinn. Danke!!! Ich war in der Lage, um herauszufinden, das widget hinzufügen, war aber immer noch fest auf löschen. Dies hat Super funktioniert. Für das hinzufügen ging ich mit dieser : Funktion addWidget() { var gridster = $(".gridster ul").gridster().Daten ("gridster'); gridster.add_widget('<li class="gs_w">HTML-Code des widgets...</li>', 2, 1); }
    InformationsquelleAutor rgomesf
  2. 1

    Unten ist die jQuery-und HTML erforderlich für das hinzufügen eines widgets zu einem gridster grid.

    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>
    • Sorry, ich dachte, es war selbst explanitory,der Obere Teil ist mit Jquery und der untere Teil ist html in seiner einfachsten form, Menschen zu helfen 🙂
    • Danke für die zusätzlichen Informationen. Ich versuchte, Sie zu verschönern Sie Ihre Antwort ein wenig. Ich hoffe, mein edit ist ok für Sie.
    InformationsquelleAutor kelevra88
Schreibe einen Kommentar