Клонирование div, включая события, примененные к элементам внутри него

Question

Клонирование div, включая события, примененные к элементам внутри него

0

Я влияю на checkbox(id="yes") который позволит texbox (чей идентификатор "string") onclicking. Я могу клонировать div. Но после этого этот эффект не работает. Может кто-нибудь мне помочь?

HTML:

<form id="form" name="myForm">
        <div id="duplicater">
        <div id="duplicate">
        <label>Machine</label>
        <select>Select<option>Opt1</option></select>
        &nbsp;
        <label>Connection Type</label>
        <select><option>Select Connection Type</option>
        </select>&nbsp;
        <label>Command To Test</label><input type="text" value="command" />&nbsp;
        <label>Validate</label><input type="checkbox" name="yes" value="yes" id="yes" 

        onclick="enableDisable()">&nbsp;
        <label>Validate String</label><input type="text" id="string" name="string" size="10" 

        disabled></div></div>
        <input type="button" value="+" class="add">
        </form>

JS CODE:

    <script type="text/javascript"> 
      $(document).ready(function(){

      $(".add").click(function () {

        var c=$('#duplicate').clone(true,true);

        $('#duplicater').append(c);
        $('#yes').append(function() {
         return $('#yes').click(enabledisable);
    })


    });
    });
    function enableDisable() { 
      if(document.myForm.yes.checked){ 
         document.myForm.string.disabled = false; 
      } else { 
         document.myForm.string.disabled = true; 
      } 
    } 
    window.onload = enableDisable;
    </script>

user3217945 04 март 2014, в 05:59

Источник

0

Для ясности, вы можете дважды проверить, что все соответствующие HTML там? Я думаю, что вы, возможно, пропустили одну или две строки. (Поскольку элемент кажется разрезанным пополам.)
Serlite 04 март 2014, в 04:52
0

@Serlite обновлен.
user3217945 04 март 2014, в 04:57

Теги:

javascript

jquery

html

2 ответа

0

Проверка документации клон JQuery

.clone( [withDataAndEvents ] [, deepWithDataAndEvents ] )
withDataAndEvents (default: false)
Type: Boolean
A Boolean indicating whether event handlers and data should be copied along with the elements. The default value is false. *In jQuery 1.5.0 the default value was incorrectly true; it was changed back to false in 1.5.1 and up.
deepWithDataAndEvents (default: value of withDataAndEvents)
Type: Boolean
A Boolean indicating whether event handlers and data for all children of the cloned element should be copied. By default its value matches the first argument value (which defaults to false).

Также см. Раздел "Делегирование событий" и используйте jQuery ON для привязки событий

Champ 04 март 2014, в 04:14

Ещё вопросы

Для ясности, вы можете дважды проверить, что все соответствующие HTML там? Я думаю, что вы, возможно, пропустили одну или две строки. (Поскольку элемент кажется разрезанным пополам.)

kp singh · Accepted Answer · 2014-03-04T03-03-00.000Z

Вы не можете использовать один и тот же идентификатор дважды в соответствии с рекомендацией w3c. и если вы его используете, javascript/jquery всегда будет ссылаться на первый элемент в документе.

Поэтому обновите код и используйте классы вместо идентификаторов

<label>Validate</label><input type="checkbox" name="yes" value="yes" class="validate-yes">&nbsp;
<label>Validate String</label><input type="text" class="validate-string" name="validate-string" size="10" disabled>

и используйте этот код js:

$(document).ready(function(){
    $(".add").click(function () {
        var c=$('.duplicate').clone(true,true);
        $('#duplicater').append(c);
    });
    $('#form').on('click', '.validate-yes', function(){
        if($(this).is(':checked')){
          $(this).parent().find('.validate-string').prop('disabled', false);
        } else {
          $(this).parent().find('.validate-string').prop('disabled', true);
        }
    });
});

Проверьте обновленный код, и вы также можете обратиться к этой скрипке, например, jsfiddle.net/BSh9c
Большое спасибо, теперь все работает нормально. :)