Я не могу получить поля из моего шаблона подчеркивания

У меня есть код, который динамически добавляет группы полей формы на страницу с использованием фреймворка underscore, и у меня проблема с получением полей ввода шаблона, поэтому я не знаю, делаю ли я что-то не так, чего не вижу.

Шаблон underscore выглядит следующим образом:

<script type="text/template" id="redirection_url_element">
    <tr>
        <td>
            <input type="text" class="regular-text" placeholder="<?php esc_attr_e( 'Enter the redirection URL', 'WPL' ); ?>" value="<%= (typeof( redirection_url ) !== 'undefined') ? redirection_url : '' %>" data-name="redirection_url" data-group="redirection" />
        </td>
        <td>
            <input type="text" class="regular-text" placeholder="<?php esc_attr_e( 'Weight', 'WPL' ); ?>" value="<%= (typeof( redirection_weight ) !== 'undefined') ? redirection_weight : '' %>" data-name="redirection_weight" data-group="redirection" />
        </td>
        <td>
            <i class="remove-parent-row">&times;</i>
        </td>
    </tr>
</script>

Итак, в моем коде javascript я делаю следующее:

console.log ( $ ( '#redirection_url_element' ).find( ':input' ) );

и я получаю следующий результат:

prevObject: e.fn.init[1], context: document, selector: "#redirection_url_element :input"]
    context: document
    length: 0
    prevObject: e.fn.init[1]
    selector: "#redirection_url_element :input"
    __proto__: m[0]

и кажется, что он не может найти поля ввода. Если вы видите, что длина равна 0.

Как вы думаете, я делаю что-то не так? Есть ли ошибка, которую я не вижу?

ОБНОВЛЕНИЕ №1

Как я использую шаблон, выглядит следующим образом:

var $template_result = _.template ( $ ( '#redirection_url_element' ).html (), $data )

Вот как я перевожу шаблон в HTML на лету и не использую backbone. Я просто ввожу $template_result в элемент назначения.

ОБНОВЛЕНИЕ №2

Итак, @Wolff, таблица выглядит так:

<table class="repeater_table">
    <tbody id="redirection_url_container">
        <tr>
            <td>
                <input type="text" class="regular-text" placeholder="Enter the redirection URL" value="" data-name="redirection_url" data-group="redirection">
            </td>
            <td>
                <input type="text" class="regular-text" placeholder="Weight" value="" data-name="redirection_weight" data-group="redirection">
            </td>
            <td>
                <i class="remove-parent-row">×</i>
            </td>
        </tr>
    </tbody>
</table>

ОБНОВЛЕНИЕ №3

Хорошо, я нашел решение благодаря заметке @Marcos Pérez Gude, и оно выглядит следующим образом:

console.log ( $( $.parseHTML( $ ( '#redirection_url_element' ).text() ) ).find( ':input' ) );

Я знаю, что это как-то уродливо, но это работает для меня. Как вы думаете, есть ли лучший способ достичь вышеизложенного?


javascript jquery
person KodeFor.Me    schedule 01.12.2015    source источник
comment
Только на заметку, в шаблоне следует избегать логики приложения. Например: value="<%= (typeof( redirection_weight ) !== 'undefined') ? redirection_weight : '' %>" . Троичное условие, которое вы можете написать в Backbone View и передать правильное значение шаблону, которое вы должны написать value="<%= redirection_weight%>", и оно может быть пустым без проблем.   -  person Marcos Pérez Gude    schedule 01.12.2015
comment
Элемент <script> не содержит HTML. Он содержит текст. Селекторы jQuery здесь не работают.   -  person Tomalak    schedule 01.12.2015
comment
Итак, @Tomalak есть ли какое-либо альтернативное решение для этого?   -  person KodeFor.Me    schedule 01.12.2015
comment
@MarcosPérezGude не используйте backbone. Я использую jQuery и перевожу underscore на лету.   -  person KodeFor.Me    schedule 01.12.2015
comment
@MerianosNikos Вы должны настроить таргетинг на HTML, отображаемый jQuery, так как это выглядит?   -  person A. Wolff    schedule 01.12.2015
comment
@Wolff Я обновил свой вопрос, как вы думаете, это ответ на ваш комментарий или вы просите что-то другое?   -  person KodeFor.Me    schedule 01.12.2015
comment
@MerianosNikos Я не знаю этот шаблон, НО если вы проверите свою таблицу в браузере после ее отображения, как она будет выглядеть? Это был мой вопрос. В качестве примечания @Wolff не отправляет мне сообщение, @A.Wolff   -  person A. Wolff    schedule 01.12.2015
comment
Итак, какова ваша цель? В вашем третьем обновлении вы ориентируетесь не на элементы в DOM, а на переменную jq, используемую в качестве оболочки. Теперь, если ваша цель состоит в том, чтобы настроить таргетинг на элементы в DOM, выглядит очевидным, что вы не использовали соответствующий селектор идентификатора, должно быть: $('#redirection_url_container').find(':input');. Если теперь ваша цель состоит в том, чтобы нацеливать элементы до их рендеринга, использование $.parseHTML( $ ( '#redirection_url_element' ).text() ) является хорошим решением, лучше, чем просто использование $( $ ( '#redirection_url_element' ).text() )   -  person A. Wolff    schedule 01.12.2015
comment
@Wolff, это то, что мне нужно, чтобы поймать поля ввода до того, как они будут введены в HTML. Извините, если я вас запутал, но это цель с самого начала.   -  person KodeFor.Me    schedule 01.12.2015
comment
@MerianosNikos Итак, я совершенно неправильно понял вопрос в начале. Теперь это имеет смысл :)   -  person A. Wolff    schedule 01.12.2015
comment
;) В любом случае большое спасибо за вашу помощь и время, которое вы потратили на мой вопрос :)   -  person KodeFor.Me    schedule 01.12.2015

Ответы (2)


arrow_upward
0
arrow_downward

Вы не можете выбирать элементы внутри тегов <script>, потому что они не являются частью структуры DOM. Здесь есть тема об этом.

Вы пытались запустить селектор для целевого элемента?

Образец:

<div id="test"></div>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
$(function() {
  $('#test').html('<span id="foo">Foo bar</span>');
  console.log($('#foo'));
});
</script>

Имейте в виду, что браузеры удаляют tr элементов, если они не находятся внутри table элементов. см. здесь.

person Bernardo Bosak de Rezende    schedule 01.12.2015
comment
Проблема решена. Если вы видите третье обновление моего вопроса, вы можете увидеть решение. Кроме того, я думаю, что, возможно, ваш ответ выходит за рамки, поэтому я не минусую :) Но имейте в виду, что другие участники могут проголосовать против вас. Большое спасибо за ваши усилия. - person KodeFor.Me; 01.12.2015

arrow_upward
-1
arrow_downward

пытаться

$( '#redirection_url_element' ).find( 'input' )
person Matteo Rubini    schedule 01.12.2015
comment
зачем минусовать это? Я думаю, что это лучше, чем find(':input') - person Marcos Pérez Gude; 01.12.2015
comment
Это могло бы быть лучше в отношении производительности, но точно не объясняет проблему ОП. И, возможно, OP не имеет только <input/> в качестве элемента управления формой и все еще хочет выбрать их все независимо от типа. Так что в этом случае :input будет лучше - person A. Wolff; 01.12.2015
comment
Это не я вас минусовал, но я уже попробовал это и не вижу смысла. - person KodeFor.Me; 01.12.2015
comment
Хорошо, спасибо за объяснение @A.Wolff. Очевидно, что это ответ низкого качества, но я не понимаю отрицательного ответа. - person Marcos Pérez Gude; 01.12.2015
comment
Я сделал это и все еще не работал. Я нашел решение, и оно доступно в моем третьем обновлении моего вопроса. Спасибо за ваши усилия. - person KodeFor.Me; 01.12.2015