Jestem całkiem nowy w WebDevelopment i AJAX i stoję tam przed małą kwestią. Zasadniczo mam formularz na mojej stronie internetowej. Kiedy przesyłam ten formularz, sprawia, że połączenie Ajax do mojego kontrolera, wyślij mi dane, które chcę wstecz, i zmienić zawartość HTML na stronie.

Kod JS:

$(document).ready(function() {

    $("#mydiv table tbody td").click(function() {
        alert("You clicked my <td>!" + $(this).html() + 
              "My TR is:" + $(this).parent("tr").html());
    });



    $('#myform').submit(function()
    {
        try {
            var host = $("#host").val();
            var port = $("#port").val();
            var username = $("#username").val();
            var password = $("#password").val();
            var database = $("#database").val();

            $.ajax({
                type: "POST",
                url: "/management/connectDatabase",
                dataType: "JSON",
                data: "host="+host+"&port="+port+"&username="+username+"&password="+password+"&database="+database,
                cache: false,
                success: 
                    function(data){
                        $('#mydiv').html(show_tables(data));
                    },
            });
            return false;
        }

        catch(e){
            console.debug(e);
        }
    });
});

function show_tables(data)
{
    var html = '<div id="mydiv">';

    html += '<table class="display" id="example">';
    html += '<thead><tr><th>Tables</th></tr></thead><tbody>';
    for (var tablesCount = 0; tablesCount < data.tables.length; tablesCount++){
        html += '<tr class=gradeA id="trtest">';
        html += '<td id="tdtest">' + data.tables[tablesCount] + '</td>';
        html += '</tr>';
    }
    html += '</tbody></table>';

    html += '</div>';
    return html;
}

Kiedy przesyłam formularz, HTML generuje dobrze i widzę moją treść. Ale nie mogę kliknąć żadnych wpisów <table>. Co więcej, kiedy chcę zobaczyć sourcecode mojej strony, nie wyświetla mnie stołu, ale wciąż moja forma, nawet jeśli nadal została zatwierdzona.

Czy ktoś mógłby mi wyjaśnić, co tu robię?

1
Nugget 2 październik 2012, 13:34

4 odpowiedzi

Najlepsza odpowiedź

W zależności od wersji jQuery, której używasz, musisz albo wiązać zdarzenie Click przy użyciu jQuery.delegate lub jQuery.on, aby rzeczy do pracy z dynamicznie dodaniami domów.

Edytuj: Jak wskazano przez Geert Jaminon, musisz użyć parametru selector funkcji {X1}}. To działa dla mnie.

$("#mydiv table tbody").on('click', 'td', function() {
    alert("You clicked my <td>!" + $(this).html() + 
          "My TR is:" + $(this).parent("tr").html());
});
2
Manu Clementz 2 październik 2012, 11:15
$("#mydiv table tbody").on('click', 'td', function() {
    alert("You clicked my <td>!" + $(this).html() + "My TR is:" + $(this).parent("tr").html());
});

.love () zastępuje się .on () w nowszych wersjach jQuery.

http://jsfiddle.net/zqygv/

1
Geert 2 październik 2012, 10:08

Musisz powiązać obsługę zdarzenia kliknięć po renderowaniu elementów, ponieważ nie były na miejscu, gdy zrobiłeś wiązanie.

0
user1703809user1703809 2 październik 2012, 09:42

Jeśli dynamicznie wstawisz dane, musisz dodać zdarzenie Click, po włożeniu danych.

http://codepen.io/thomassnielsen/pen/fekdg.

$.post('ajax/test.html', function(data) {
  $('.result').html(data);
  // Add .click code here
});
0
thomassnielsen 2 październik 2012, 10:35