проблема клонирования DIV с функциональностью ... делая немного абстракций данных - PullRequest
Новая
       5

проблема клонирования DIV с функциональностью ... делая немного абстракций данных

0 голосов
/ 23 апреля 2011

Я искал способ создания модулей, которые можно было бы легко включить во все виды проектов. Я хотел не только сценарии в отдельном файле, но также определения шаблонов и тому подобное. Поскольку div не может быть объявлен в отдельном файле, мне пришлось искать другой путь. То, что я могу сделать, было это: 

<head>
<title>DOMtest</title>

<script src='http://code.jquery.com/jquery-1.5.js'></script>

</head>

<body>
<script>

$(document).ready( function() {

    $("#holder").load( "template_link.html", function() {
        $("#test").append( clonelink( 1 ) );
        $("#test").append( clonelink( 2 ) );
        $("#test").append( clonelink( 3 ) );
    });

    $("#testbutton").click( function() {
        $("#test").append( clonelink( 4 ) );
    });


});
</script>

<div id='test' style='border: 1px solid black'>
<input type='button' id='testbutton' value='give me another clone'/>
</div>


<div id='holder' style='border: 1px solid black'>
</div>

</body>
</html>

затем в отдельном файле с именем template_link.html у меня было следующее: 

<script src='http://code.jquery.com/jquery-1.5.js'></script>

<div id='template_link'>
    This is a template<br />
    Let's see if this works or <span class='link_clicktest'>not</span>!
</div>

<script>

$("span.link_clicktest").click( function() {
    $d = $(this).closest( "div.link" );

    alert( "span " + $d.attr( "id" ) + " was clicked" );
});

function clonelink( $id ) {
    $c = $("#template_link").clone( true );
    $c.attr( "id", $id );
    $c.addClass( 'link' );

    alert( $id + "-" + $c.html() );
    return $c;
}

</script>

Сначала казалось, что это работает. Я объявил промежуток в шаблоне. Если вы нажмете «нет!» Вы получите идентификатор этого промежутка. Клонирование первых 3, кажется, работает, они отображаются на экране так, как они должны. Но тогда ...

Я нажал на кнопку "дай мне еще один клон". Клон действительно создан. С помощью оповещения в функции clonelink я вижу, что идентификатор попадает туда. Но даже с включенной опцией 'true' в .clone () - call, кажется, это не клонирует функциональность span.

Я наблюдаю за чем-то или пытаюсь сделать что-то, что не может быть сделано таким образом?

1 Ответ

0 голосов
/ 24 апреля 2011

Я нашел способ обойти ...

Вместо помещения функциональности в шаблон я определил функции для каждого клона, поэтому функция clonelink изменилась на: 

function clonelink( $id ) {
    $c = $("#template_link").clone();
    $c.attr( "id", $id );
    $c.addClass( 'link' );

    $c.find(span.link_clicktest").click( function() { 
        $d = $(this).closest( "div.link" );
        alert( "span " + $d.attr( "id" ) + " was clicked" );
    });

    alert( $id + "-" + $c.html() );
    return $c;
}

Теперь для каждого созданного клона функция щелчка снова связывается. .Clone (true) заменяется на .clone (), потому что связанные с ним функции все равно переопределяются. Это работает как очарование, но я все еще озадачен, почему первый пример в оригинальном посте не сработал. На экране есть рабочий DIV, клонированный с помощью .clone (true), но функция .click не привязана к определенному диапазону ...

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

...