Установите флажок использовать с .mouseup вернуть ложную проблему - PullRequest
Новая
       6

Установите флажок использовать с .mouseup вернуть ложную проблему

0 голосов
/ 08 июля 2011

Я слежу за этим уроком:

http://www.9lessons.info/2011/03/live-table-edit-with-jquery-and-ajax.html

Мое добавление состоит в основном из содержимого ajax / json / dynamic.Я добавил поле выбора, которое также заполняется динамически.Когда я пытаюсь выбрать что-то в выпадающем списке, оно автоматически закрывается.Я полагаю, из-за этого: 

$(".editbox").mouseup(function(){
    return false
});

Я пытался использовать некоторые варианты этого: 

$('input[type=select]').click(function(event){event.stopPropagation()});

Но я нахожусь дальше по кроличьей норе, чем позволяет мое нынешнее понимание.Любые предложения будут с благодарностью.

1 Ответ

1 голос
/ 08 июля 2011

Вы можете решить эту проблему, обернув код в событии click вашего tr оператором if, который проверяет, какой элемент был фактически нажат. Это приведет к тому, что ваш код будет скрывать / показывать входные данные только тогда, когда пользователь щелкает непосредственно по <td> или <span> с соответствующим классом. Это позволит вам избавиться от обработчика события мыши .editbox.

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

$(document).ready(function() {
    $(".edit_tr").click(function(e) {
        if ($(e.target).hasClass('edit_td') || $(e.target).hasClass('text')) {
            var ID = $(this).attr('id');
            $("#first_" + ID).hide();
            $("#last_" + ID).hide();
            $("#first_input_" + ID).show();
            $("#last_input_" + ID).show();
        }
    }).change(function() {
        var ID = $(this).attr('id');
        var first = $("#first_input_" + ID).val();
        var last = $("#last_input_" + ID).val();
        var dataString = 'id=' + ID + '&firstname=' + first + '&lastname=' + last;
        $("#first_" + ID).html('<img src="load.gif" />'); // Loading image
        if (first.length > 0 && last.length > 0) {

            $.ajax({
                type: "POST",
                url: "table_edit_ajax.php",
                data: dataString,
                cache: false,
                success: function(html) {
                    $("#first_" + ID).html(first);
                    $("#last_" + ID).html(last);
                }
            });
        }
        else {
            alert('Enter something.');
        }

    });

    // Outside click action
    $(document).mouseup(function(e) {
        if (!$(e.target).hasClass('editbox')) {
            $(".editbox").hide();
            $(".text").show();
        }
    });

});

Соответствующий код выше: 

$(".edit_tr").click(function(e) {
    if ($(e.target).hasClass('edit_td') || $(e.target).hasClass('text')) {
        var ID = $(this).attr('id');
        $("#first_" + ID).hide();
        $("#last_" + ID).hide();
        $("#first_input_" + ID).show();
        $("#last_input_" + ID).show();
    }
})

Не забудьте удалить этот код: 

$(".editbox").mouseup(function() {
    return false
});

Редактировать: Вам нужно будет сделать что-то подобное в обработчике кликов «документ». Кроме этого, вы игнорируете щелчки, если у цели есть класс 'editbox'. 

// Outside click action
$(document).mouseup(function(e) {
    if (!$(e.target).hasClass('editbox')) {
        $(".editbox").hide();
        $(".text").show();
    }
});
...