jquery - $ (это) не относится к вновь созданным элементам?

Question

У меня есть от, что-то вроде, если я спрашиваю вас, сколько ссылок вы получили.сначала вы выбираете в раскрывающемся меню пол, затем появляются соответствующие текстовые поля ..

$("#select").change(function(){             
        var type = $(this).find("option:selected").val();
        $("input").hide().filter("." + type).show();
        $(":button").show();
        });

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

    var initial=0;
            function addReference(){
                var newDiv= addNewDiv();
                var htcontents="<select id=\'new\'>" +
                    "<option value=\'\'>--choose--</option>
                     <option value=\'article\'>article</option>
                     <option value=\'thesis\'>thesis</option>"
                      + "<input class=\'article\' type=\'textbox\' name=\'ref_author_name[]\'/>" 
                      + "<input class=\'article\' type=\'textbox\' name=\'ref_article_title[]\'/>"  
                      + "<input class=\'thesis\'  type=\'textbox\' name=\'ref_author_name[]\'/>" 
                      + "<input class=\'thesis\'  type=\'textbox\' name=\'ref_thesis_title[]\'/>";
                      document.getElementById(newDiv).innerHTML=htcontents;
            }
            function addNewDiv(){
                initial=initial+1;
                var ni = document.getElementById('area');
                var newdiv=document.createElement('div');
                var divIdName = 'Div #' +initial;
                newdiv.setAttribute('id', divIdName);
                ni.appendChild(newdiv);
                return divIdName;
            } // i guess there is a more simple solution with jQuery, but i do not know..

Моя проблема в том, что когда вы добавляете вторую ссылку и выбираете опцию, видимые текстовые поля не меняются.я думаю, это происходит из-за кода jquery, который у меня есть,

var type = $(this).find("option:selected").val();
 $("input").hide().filter("." + type).show();

Я думаю, я не выбираю, как следует, какие-либо идеи?

любая помощь очень ценится1013 * вот скрипка: http://goo.gl/Xdjtc

Answer 1

Во-первых, я думаю, что вы не закрываете <select> в строке htcontents.

Насколько я понимаю, вы хотите добавить вторую ссылку, используя JavaScript. Чтобы связать обработчик событий с этим вновь созданным выбором, вам нужно использовать функцию .on () , которая автоматически работает с элементами, которые создаются после выполнения строки при загрузке страницы.

Тогда вы можете перепутать идентификатор "#select" и элемент "select". Вторая ссылка не соответствует вашему селектору. Вы должны использовать класс как .my-selectbox (используя, конечно, лучшее имя) вместо идентификатора, поскольку у вас есть несколько элементов, которые должны вести себя одинаково и соответствовать вашему селектору.

Для получения дополнительной помощи было бы полезно, если бы вы могли предоставить рабочий пример по http://jsfiddle.net/ или https://tinker.io/. Таким образом, кто-то мог бы лучше понять, что вы пытаетесь сделать, и исправить код, если это необходимо. .

Надеюсь, это поможет.

Редактирование на основе вашего jsfiddle: попробуйте, если это то, что вы ищете: Обновленная версия вашей скрипки . Вы не должны использовать идентификатор дважды или более, он должен быть уникальным. Вместо этого используйте классы.

Если вы используете Firefox, отметьте Firebug и, возможно, API консоли . Это действительно помогает отладить ваш код. Для других браузеров (Safari, Chrome) есть аналогичные инструменты для веб-разработчиков, которые также предоставляют консоль. Отладьте ваши объекты так:

console.debug(myObject);

Answer 2

Вам необходимо использовать .delegate () (http://api.jquery.com/delegate/) или .on () (http://api.jquery.com/on/)

например:

    $("form").on('select','change',function(){             
            var type = $(this).find("option:selected").val();
            $("input").hide().filter("." + type).show();
            $(":button").show();
    });

Причина в том, что в отношении javascript эти вновь созданные элементы не существуют. Использование делегата или создание пузырьковых событий, которые будут применяться к существующим и будущим элементам.

Надеюсь, это поможет:)