Блог

Главная - Вопросы по программированию - Проблема с формой Jquery. Добавление параметров удаления из selectbox

Проблема с формой Jquery. Добавление параметров удаления из selectbox

#jquery #forms #select #append #option

#jquery #формы #выберите #добавить

Вопрос:

У меня есть форма с большим количеством опций.

В форме я могу сделать данные частными или общедоступными, чтобы;

  1. Сделайте данные конфиденциальными: да, нет (переключатели)
  2. Если нажать «Да», отобразится скрытый div с еще 2 параметрами формы; a. поиск по имени участника (ввод текста) b. выбранные участники (поле множественного выбора).

Если я нажму сделать данные приватными «да» и выполню поиск по имени пользователя, найденные результаты будут отображаться в виде окна с предложениями. Когда я нажимаю на имя пользователя (в одном из найденных результатов, отображаемых в окне предложения), я могу успешно добавить его в свой список избранных участников

Если я решу сделать это общедоступным и нажму сделать данные приватными «нет» после добавления некоторых участников в мое поле множественного выбора (выбранные участники), я удалю все параметры и добавлю туда 1 вариант обратно (Общедоступный просмотр).

Проблема начинается после этого. Перед отправкой формы, если я снова нажму сделать данные приватными «да» (1; нажал «Да», выбрал некоторых участников, 2; нажал «Нет» и удалил все параметры из selectbox, 3; снова нажал «Да»), выполняю поиск некоторых участников и нажимаю на них, в моем окне множественного выбора (выбранные участники) добавляется 2 раза.

Интересно, что если я сделаю это 2 раза (добавлю некоторых участников, нажму «Нет» для конфиденциальности и удалю параметры), в следующий раз, когда я захочу добавить некоторых участников, это будет добавлено 2 раза. Если я делаю это 5 раз, это добавляет 5 раз.

Вот мой Jquery;

 // Private Options
$('input[name=make_private]').bind('click', function() {
    // Make It Private
    if ($(this).val() == 1) {
        $('.frm_make_private_1').fadeIn(1000);
        // Get clicked member
        $('a.member').live('click', function() {
            var username = $(this).text();
            var id = $(this).attr("id");
            // Add it to the Allowed Members Multi Selectbox
            $('#allowedMembers').append($("<option></option>").attr("value", id).text(username).attr("selected", "selected"));
            // Don't load the page
            return false;
        });
    }
    // Make It Public
    else {
        // Hide everything about Product Privacy
        $('.frm_make_private_1').fadeOut(1000);
        // Remove All Options
        $("#allowedMembers option").each(function() {
            $(this).remove();
        });
        // Add Public Option
        $('#allowedMembers').append($("<option></option>").attr("value", 0).text("Public View"));
    }
});

Ответ №1:

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

Попробуйте

 ('input[name=make_private]').unbind().bind('click', function () {
// Make It Private
if ($(this).val() == 1) {
    $('.frm_make_private_1').fadeIn(1000);
    // Get clicked member
    $('a.member').unbind().live('click', function () {
        var username = $(this).text();
        var id = $(this).attr("id");
        // Add it to the Allowed Members Multi Selectbox
        $('#allowedMembers').append($("<option></option>").attr("value", id).text(username).attr("selected","selected"));
        // Don't load the page
        return false;
    });
}
// Make It Public
else {
    // Hide everything about Product Privacy
    $('.frm_make_private_1').fadeOut(1000);
    // Remove All Options
    $("#allowedMembers option").each(function() {
        $(this).remove();
    });         
    // Add Public Option
    $('#allowedMembers').append($("<option></option>").attr("value", 0).text("Public View"));
}
});

Комментарии:

1. Привет, Рон, во-первых, спасибо за твой ответ. Где именно я должен это использовать и как я должен это использовать? Я не эксперт, я был бы рад, если бы вы могли помочь.

2. Привет, Рон, спасибо за твой ответ. К сожалению, добавление .unbind() перед bind (‘click’) и live (‘click’) не помогло 🙁

3. Нашел способ, переместив $ (‘a.member’).live (‘click’) за пределы $ (‘input [name=make_private]’).bind(‘click’) сделал свое дело. Спасибо за помощь. Я хотел бы принять ваш ответ в качестве решения (по крайней мере, вспомогательного), но я не знаю, хороший ли это путь. Я здесь новичок, у вас есть какие-либо предложения?

4. Не беспокойтесь. Принимайте только те решения, которые решают проблему. Чтобы люди, которые столкнутся с этим вопросом в будущем, не запутались. Голосуйте за все, что полезно.

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

Ответ №2:

Нашел способ, переместив $ (‘a.member’).live (‘click’) за пределы $ (‘input [name=make_private]’).bind(‘click’) сделал свое дело. Спасибо, Рон, за руководство мной.

 // Private Options
$('input[name=make_private]').bind('click', function () {
    // Make It Private
    if ($(this).val() == 1) {
        $('.frm_make_private_1').fadeIn(1000);
    }
    // Make It Public
    else {
        // Hide everything about Product Privacy
        $('.frm_make_private_1').fadeOut(1000);
        // Remove All Options
        $("#allowedMembers option").each(function() {
            $(this).remove();
        });         
        // Add Public Option
        $('#allowedMembers').append($("<option></option>").attr("value", 0).text("Public View"));
    }
});
// Get clicked member
    $('a.member').live('click', function () {
        var username = $(this).text();
        var id = $(this).attr("id");
        // Add it to the Allowed Members Multi Selectbox
        $('#allowedMembers').append($("<option></option>").attr("value", id).text(username).attr("selected","selected"));
        // Don't load the page
        return false;
    });