Добавить элемент внутри другого уже добавленного

Я знаю, как добавить элемент в другой элемент, но как я могу это сделать еще раз? В моем примере, когда я нажимаю кнопку + Title, он добавляет элемент, и когда я нажимаю Add Subtitle, у меня есть еще один.Добавить элемент внутри другого уже добавленного

Однако, когда я нажимаю кнопку Comment, я хочу добавить <p>Comment</p> непосредственно под раздел субтитров. Как я могу это сделать?

$(document).ready(function() {  
 
    $('#btnAdd').on('click', function() { 
 
    $('ul').append('<li> Title <input id="title" type="button" value="Add Subtitle" /></li>'); 
 
    }); 
 

 
    $('ul').on('click', 'li', function() { 
 
    $(this).append('</br>Subtitle <input id="sub" type="button" value="Comment" />'); 
 
    }); 
 

 
    $('li').on('click', '#sub', function() { 
 
    $(this).append('<p>Comments</p>'); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<body style="font-family:Arial"> 
 
    <input id="btnAdd" type="button" value="+ Title" /> 
 
    <ul> 
 
     <li>Title <input id="title" type="button" value="Add Subtitle"/></li> 
 
    </ul> 
 
</body>

источник

2016-12-13 Uxrieg

Попробуйте это:

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

     $('#btnAdd').on('click', function() { 
      $('ul').append('<li> Title <input id="title" type="button" value="Add Subtitle" /></li>'); 
     }); 

     $('ul').on('click', '#title', function() { 
      $(this).closest('li').append('<p>Subtitle <input id="sub" type="button" value="Comment" /></p>'); 
     }); 

     $(document).on('click', '#sub', function() { 
      $(this).closest('li p').append('<p style="margin-left: 10px;">Comments</p>'); 
     }); 

    }); 
</script>

источник

2016-12-13 16:10:06

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

источник

2016-12-13 15:46:40

Working fiddle.

Вы должны использовать e.stopPropagation(), чтобы остановить событие щелчка от пропускания:

$('#btnAdd').on('click', function() { 
    $('ul').append('<li> Title <input id="title" type="button" value="Add Subtitle" /></li>'); 
}); 

$('body').on('click', 'li', function() { 
    $(this).append('</br>Subtitle <input class="sub" type="button" value="Comment" />'); 
}); 

$('body').on('click', 'input.sub', function (e) { 
    e.stopPropagation(); 

    $(this).parent().append('<p>Comments</p>'); 
});

Примечания 1:id должен быть уникальным в том же документе использование класса sub вместо этого.

Примечание 2: Вы должны добавить свой комментарий к родителю, а не непосредственно на вход:

$(this).parent().append('<p>Comments</p>');

Надеется, что это помогает.

$('#btnAdd').on('click', function() { 
 
    $('ul').append('<li> Title <input id="title" type="button" value="Add Subtitle" /></li>'); 
 
}); 
 

 
$('body').on('click', 'li', function() { 
 
    $(this).append('</br>Subtitle <input class="sub" type="button" value="Comment" />'); 
 
}); 
 

 
$('body').on('click', 'input.sub', function (e) { 
 
    e.stopPropagation(); 
 

 
    $(this).parent().append('<p>Comments</p>'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="btnAdd" type="button" value="+ Title" /> 
 
<ul> 
 
    <li> Title <input id="title" type="button" value="Add Subtitle"/></li> 
 
</ul>

источник

2016-12-13 15:54:15

Это именно то, что я хочу! Большое спасибо ! Единственная проблема, которую я вижу, когда, например, я создаю много секций «Субтитры», и я хочу добавить комментарии к первому. Они появляются в последнем разделе, а не в текущем разделе, который я только что нажал = ( – Uxrieg

Добавить элемент внутри другого уже добавленного

ответ

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