仅在具有相同 class 的一里预览文本

Question

我有一个 <ul>，当我在输入框中键入时，文本会在列表中预览。我还有一个按钮，我可以在其中向 <ul> 添加更多 <li>。我想要它，这样当我在文本框中键入文本时，文本就会在那个 <li>.

上预览

我的代码：

<ul class="nav nav-list nav-stacked" id="courseNav">
    <li class="title">
        <a href="#">Overview</a>
    </li>
    <li class="topics" style="margin-top: -12px">
        <a href="#">Topic</a>
    </li>
    <li class="topics">
        <a href="#">Topic</a>
    </li>
    <li class="topics">
        <a href="#">Topic</a>
    </li>
</ul>

我的按钮代码：

$('#addCourse').click(function() {
    // adds a li to the courseNav
    $('#courseNav').append('<li class="newTopic" id="newLi"><a href="#">Topic</a></li>');

    $('.newTopic').click(function() {
        $('#courseDiv').css('display', 'none');
        $('#topicDiv').css('display', 'block');
    }); 
});

$('#delCourse').click(function() {
    $('#newLi').remove();
});

我的预览代码：

var input = $('#editorText'),
    preview = $('.topics a');

    input.keyup(function (e) {
        preview.html(input.val());
        preview.css('padding-top', '10px');
        preview.css('padding-bottom', '10px');
        preview.css('padding-right', '15px');
        preview.css('padding-left', '15px');
        preview.css('word-wrap', 'break-word');
    });

问题是在 class "topic" 的所有 <li> 上都可以预览文本。我怎样才能解决这个问题？我可以将 id 分配给 <li>，但是按钮添加的那些呢？

New fiddle

Answer 1

看看jsFiddle。单击您可以保存当前节点，并且 keyup 绑定必须超出 click 处理程序

input.keyup(function (e){
   ...    
}

$('.topics').click(function(){
    preview = $(this).find('a');
    ...
}

仅在具有相同 class 的一里预览文本

Preview text on only one li having same class

html

javascript

css

jquery

summernote