Tworzę aplikację z programem PhoneGap za pomocą jQuery i jQuery Mobile (1.3.2). Po prostu nie znalazłem sposobu, aby uzyskać dynamicznie utworzony przycisk do pracy. Używam kotwicy jako przycisku, więc "przycisk (" Odśwież ")" nie robi nic.

Najpierw mam przycisk zdefiniowany w samym HTML w ten sposób:

<a data-role="button" data-icon="plus" data-iconpos="right" id="addNewStep">Add a step</a>

Następnie mam JavaScript, który dodaje akcję do tego przycisku:

$('#addNewStep').click(function (e) {
    e.preventDefault();
    e.stopImmediatePropagation();

    addStepDiv();
});

Przycisk powyżej działa i tworzy nowy element UL, który zawiera przycisk kotwicy. Ten przycisk kotwicy jest tym, którego nie mogę pracować. Odkąd mam kilka opcji stylizacji. Multiline ciąg działa, ponieważ wyświetlany jest cały element. Addstepdiv ():

function addStepDiv() {
    stepDiv = '<ul class="newStepList containerBox" data-role="listview" data-inset="true" data-dividertheme="a"> \
    <li data-role="list-divider" data-dividertheme="a"> \
        <span style="float: left; margin-top: 7px;">Title</span> \
        <a data-role="button" data-mini="true" data-inline="true" data-icon="delete" data-iconpos="notext" class="delStepButton"></a> \
        <br style="clear: both;" /> \
    </li> \
        <li>Text</li> \
    </ul>';

    // Adds the above div under the "Add a step" -button
    $('#addNewStep').parent().append(stepDiv).trigger('create');
}

Przycisk Usuń powinien coś zrobić. Na razie umieściłem alarm, aby sprawdzić, czy przycisk pracuje. Nie wyświetlany jest alert.

$('.delStepButton').click(function (e) {
    e.preventDefault();
    e.stopImmediatePropagation();

    alert("Delete button");
});

Wszystko inne działa. "Dodaj krok" -Button tworzy element UL i jest wyświetlany prawidłowo, a wyświetlany jest również "Usuń" -Button, ale nic się nie dzieje po kliknięciu.

// Edytuj: Czuję się jak całkowity idiota ... Dziękuję bardzo za odpowiedzi (Sridhar R & JCabello). Problem naprawiony z:

$(document).on('click', '.delStepButton', function (e) {
    //Do stuff here.
}); 
-2
Aerthos 10 grudzień 2013, 14:01

2 odpowiedzi

Najlepsza odpowiedź

Ponieważ element .delStepButton są tworzone dynamicznie, musisz użyć delegacji zdarzeń, aby zarejestrować obsługiwanie obsługi zdarzeń do tych elementów.

Kiedy używasz $('.delStepButton').click(....);, aby zarejestrować przewóz zdarzeń, zarejestruje uchwyt tylko do tych elementów, które są już obecne w Domu w momencie wykonania kodu, w Case, ponieważ elementy te są tworzone po tym, że ładowarki będą nie podłączyć do nowo utworzonych elementów

Spróbuj z tym

$(document).on('click','.delStepButton',function (e) {
    e.preventDefault();
    e.stopImmediatePropagation();
    alert("Moi");
});
1
Sridhar R 10 grudzień 2013, 10:03

Spróbuj dołączyć słuchacza do dokumentu, zamiast samego przedmiotu, ponieważ nie istnieje w momencie umieszczenia słuchacza.

$(document).on('click', '.delStepButton', function (e) {
    //Do stuff here.
});
0
JCabello 10 grudzień 2013, 10:04