JQuery click target target / button открывает два диалоговых окна - PullRequest
1 голос
/ 29 февраля 2012

Я использую asp.net webGrid, в котором у меня есть две кнопки, которые открывают одно и то же диалоговое окно (с разным содержимым) и диалоговое окно, которое должно открываться только при нажатии на текущую строку (а не при нажатии кнопки). У меня есть это, если еще, который проверяет, является ли нажатый элемент кнопкой или нет.

Проблема в том, что это нормально работает в первый раз после загрузки страницы. Если я нажимаю только кнопки, он открывает правильный диалог. Но после первого щелчка строки щелчки кнопок теперь открывают оба диалога одновременно.

Вот код,

$('#grid').click(function(e){
    if($(e.target).is(':button'))
    {
        $('.edit-db').live('click', function () {
            $.getJSON('/Methods/dbQuery/' + $(this).attr('id'), function (data) {
                var lista = data;
                $('#edit-id').val(lista.id);
                $('#edit-nimi').val(lista.nimi);
                $('#edit-ip').val(lista.ip);
            });
            $('#action-type').val('edit');
            tyyppi = 'edit';
            $("#edit").show();
            $("#delete").hide();
            $('#dialog-edit').dialog('open');
        });

        $('.delete-row').live('click', function () {
            $.getJSON('/Methods/dbQuery/' + $(this).attr('id'), function (data) {
                var lista = data;
                $('#edit-id').val(lista.id);
            });
            $('#action-type').val('delete');
            $("#edit").hide();
            $("#delete").show();
            $('#dialog-edit').dialog('open');
        });
    }
    else
    {
        $('tbody tr').live('hover', function () {
            id = $(this).find('td:first').text();
            $(this).toggleClass('clickable');
        }).live('click', function () {
            $("#devInfo").load("deviceInfo.cshtml/" + id).dialog('open');
        });
    }
});

1 Ответ

0 голосов
/ 29 февраля 2012

Вам не нужен обработчик кликов для вызовов метода live().Поскольку он у вас есть, live() постоянно устанавливается для этих элементов после каждого щелчка.

Проверка is(':button') является избыточной, поскольку элемент tr в любом случае никогда не может быть кнопкой.

Кроме того, live() устарела.Если вы используете jQuery 1.7+, вы должны использовать on(), в противном случае вы должны использовать delegate().

Попробуйте это:

$('#grid').delegate('.edit-db', 'click', function (e) {
    e.stopPropagation();
    $.getJSON('/Methods/dbQuery/' + $(this).attr('id'), function (data) {
        var lista = data;
        $('#edit-id').val(lista.id);
        $('#edit-nimi').val(lista.nimi);
        $('#edit-ip').val(lista.ip);
    });
    $('#action-type').val('edit');
    tyyppi = 'edit';
    $("#edit").show();
    $("#delete").hide();
    $('#dialog-edit').dialog('open');
});
.delegate('.delete-row', 'click', function (e) {
    e.stopPropagation();
    $.getJSON('/Methods/dbQuery/' + $(this).attr('id'), function (data) {
        var lista = data;
        $('#edit-id').val(lista.id);
    });
    $('#action-type').val('delete');
    $("#edit").hide();
    $("#delete").show();
    $('#dialog-edit').dialog('open');
});
.delegate('tbody tr', 'hover', function () {
    id = $(this).find('td:first').text();
    $(this).toggleClass('clickable');
})
.delegate('tbody tr', 'click', function () {
    $("#devInfo").load("deviceInfo.cshtml/" + id).dialog('open');
});
...