Если вы используете append() для вставки нового узла DOM, можно ли переместить контекст цепи в новый элемент?Получить элемент из последнего вызова append()

Этот пример кода иллюстрирует эту тему:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
         "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head><title></title> 
<script type="text/javascript" 
     src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> 
</script> 
<script type="text/javascript"><!-- 
$(function(){ 
    $("<div></div>") 
     .appendTo("body") 
     .append("<span>Click me</span>") 
     .click(function(){ 
      alert("Clicked on <" + this.tagName + ">, <SPAN> expected"); 
     }); 
}); 
//--></script> 
</head> 
<body> 

</body> 
</html>

Этот код attachs обработчик OnClick к <div>, но я хочу его в новом <span>.

Edit: уточнение

Я предполагаю, что я думал о прямой функции, такие как add() или andSelf(), что не нарушает поток цепи столько <:-)

Edit: резюме решение

Для записей: не существует функции findAppended(). Вот некоторые из вариантов:

Alter потока создания:

$("<span>Click me</span>") 
    .appendTo("body") 
    .wrap("<div></div>") 
    .click(function(){ 
     alert("Clicked on <" + this.tagName + ">, <SPAN> expected"); 
    });

магазин новый элемент в переменной:

var span = $("<span>Click me</span>") 
    .click(function(){ 
     alert("Clicked on <" + this.tagName + ">, <SPAN> expected"); 
    }); 
$("<div></div>") 
    .appendTo("body") 
    .append(span);

Начать новую субцепь:

$("<div></div>") 
    .appendTo("body") 
    .append(
     $("<span>Click me</span>") 
     .click(function(){ 
      alert("Clicked on <" + this.tagName + ">, <SPAN> expected"); 
     }) 
    );

Найти новый элемент после его создания:

$("<div></div>") 
    .appendTo("body") 
    .append("<span>Click me</span>") 
    .find("span:last") 
    .click(function(){ 
     alert("Clicked on <" + this.tagName + ">, <SPAN> expected"); 
    }) 
    .end(); // Not necessary here, used to illustrate how to continue the chain

Примечания: код не тестировался.

источник

2010-07-07 Álvaro González

лол, посмотрите, что вы сделали - вы выставили 5 триллионов способов сделать то же самое в JQuery, Хахаха –

@Dan Хеберден: Вы правы :) –

сделал некоторые изменения к моему ответу re: ваше уточнение –

Возможно, лучше сломать это немного, но вам нужно начать с элемента или найти его. Таким образом, вы можете либо:

$("<div></div>") 
     .appendTo("body") 
     .append("<span>Click me</span>") 
     .find('span') 
     .click(function(){ 
      alert("Clicked on <" + this.tagName + ">, <SPAN> expected"); 
     });

или

$('<span>Click me</span>') 
    .appendTo("body") 
    .wrap('<div />') 
    .click(function(){ 
       alert("Clicked on <" + this.tagName + ">, <SPAN> expected"); 
      });

find и wrap

Edit: относительно OP редактировать

Имейте в виду .add() (http://api.jquery.com/add/) уже существует, и делает то, что имя влечет за собой. Кроме того, что-то вроде

var $span = $('<span>click me</span>').click( 
       function() { 
        alert("Clicked on <" + this.tagName + ">, <SPAN> expected"); 
       }); 
$('<div></div>').append($span).appendTo('body');

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

JQuery уже классификации методов фильтрации и пересекают РОМ. В вашем случае DOM вы можете легко использовать .find('span'), чтобы добраться до элемента - или .children('span'). Здесь важно использовать хорошие селектора и общую архитектуру сайта.

Кроме того, функция .end() довольно задиры:

$('ul').append('<li>test</li><li>test2</li>') // add two li elements 
    .children().eq(0).css('background-color', '#ff0000') // change the background of the first child 
    .end().css('margin-left', '20px'); //revert to the original data-set (the ul) and change its margin

источник

2010-07-07 08:13:25

'add()' изменяет набор согласованных элементов, а не DOM, поэтому мне все равно нужно использовать любой из других методов (изменить поток создания, элемент хранения в переменной, запустить новую подцепи или найти элемент после создания). Во всяком случае, я принимаю этот ответ, потому что кажется, что никакой нативной функции не существует, и вы обеспечиваете хороший контроль над альтернативами. –

Это может быть сделано путем перепроектирования создания объекта потока немного. Итак, создайте интервал, настройте его, обработайте клик, а затем добавьте его в тело. Это возможно благодаря плавным интерфейсам jquery.

$(function(){ 
$("<div></div>") 
    .appendTo("body") 
    .append(
    $("<span/>") 
     .text("Click me") 
     .click(function(){ 
      alert("Clicked on <" + this.tagName + ">, <SPAN> expected"); 
     })); 
});

источник

2010-07-07 08:13:48

$(function(){ 
    $("<div></div>") 
     .appendTo("body") 
     .append($("<span>Click me</span>").click(function(){ 
      alert("Clicked on <" + this.tagName + ">, <SPAN> expected"); 
     }));   
});

источник

2010-07-07 08:14:11 jAndy

Получить элемент из последнего вызова append()

Edit: уточнение

Edit: резюме решение

ответ

Смежные вопросы