javascript - 在按键上，动态添加选项卡？

Question

我在使用这段代码时遇到了一些问题。

    $('body').on("keypress", ".message", function(e) {
      if ( e.keyCode == 13 && $(".message").val().length > 0 ) {

          input = $(".message");
          // Check for join command.
          if (input.val().substr(0, 5) == "/join") {

            // Get channel
            channel = input.val().substr(7, input.val().length);

            // APPEND NEW TAB
            $("ul.nav-tabs li").after('<li><a href="#' + channel + '" aria-controls="#' + channel + '" role="tab" data-toggle="tab">#' + channel + '</li>');
            $('.tab-content').append('<li class="tab-pane log" role="tab-pane" id="' + channel + '" data-channel="' + channel + '"><div class="Topic">Hej och välkommen till #' + channel + '.</div><ul class="Messages"></ul><input type="text" name="message" id="message" autocomplete="off" class="message sendValue"></li>');
            $(".nav-tabs li").children('a').last().click();
          }


          log('<strong>Du</strong>: ' + input.val());
          send( input.val() );

          $(".message").val('');
        }
      });

按键事件不会对动态添加的输入使用react，我读了一些关于添加后添加 on 事件的内容，因为此代码在加载 dom 时运行。

所以我的问题是:如何才能使动态输入也能正常工作？

Answer 1

您已经在使用 .on 所以我认为它工作正常，您真正的问题是:

input = $(".message");

您需要将其更改为:

var input = $(this);

否则，即使页面上有多个输入，您也将始终处理第一个输入。您还可以使用 inspect element > console 更轻松地调试这些问题。例如，如果您添加:

$('body').on("keypress", ".message", function(e) { console.log(e);

对于您的脚本，您会发现事件处理程序工作正常，并且您的问题更进一步。

(同时将 $(".message").val(''); 更改为 input.val('');)