javascript - html 中的 html 中的 JavaScript

Question

这个问题已经有答案了:

Event binding on dynamically created elements? (23 个回答)

已关闭 5 年前。

我有一个动态表单，我想在其中附加一些其他 html，但是当我想使用附加 html 的事件时，我应该在第一个脚本中包含该脚本，但我也想在第二个脚本中添加另一个 html脚本，但我不知道如何处理引号标签:

      $(document).ready(function(){
    $("#registerNums").on('click',function(){
      var inputnums = parseInt($("#inputnums").val());
      alert(inputnums);
      var outputnums = parseInt($("#outputnums").val());
      alert(outputnums);
      var rulenums = parseInt($("#rulenums").val());
      for(var i=1; i < inputnums + 1; i++){
        var inputmems =
        '<div class="form-row">'+
          '<div class="form-row">'+
            '<div class="form-group col-md-3">'+
              '<label for="inputmems'+ i +'">Enter the number of your input'+ i +' membership functions:</label>'+
              '<input type="text" class="form-control" id="inputmems'+ i +'" name="inputmems'+ i +'" placeholder="Enter inputmems">'+
            '</div>'+
            '<div class="form-group col-md-3">'+
              '<label for="inputname'+ i +'">Enter the name of your input'+ i +' membership functions:</label>'+
              '<input type="text" class="form-control" id="inputname'+ i +'" name="inputname'+ i +'" placeholder="Enter inputname">'+
            '</div>'+
            '<div class="form-group col-md-3">'+
              '<label for="inputrange'+ i +'">Enter the range of your input'+ i +' membership functions:</label>'+
              '<input type="text" class="form-control" id="inputrange'+ i +'" name="inputrange'+ i +'" placeholder="Enter inputrange">'+
            '</div>'+
            '<div class="form-group col-md-3">'+
              '<input type="button" class="btn btn-primary" id="registerMems" value="register mems">'+
              '<script type="text/javascript">'+
                '$(document).ready(function(){'+
                  '$(".registerMems").on("click",function(){'
                    'var inputmems = parseInt($(this).parent().parent().find("#inputmems").val())'+
                      'alert(inputmems);'+
                      'for(i=1;i < inputmems+1;i++){'+
                      '$(this).parent().parent().parent().find(".mem").append('+
                      +'<div class="form-group col-md-4">'+
                        '<label for="memname">Enter the name of your input membership function:</label>'+
                        '<input type="text" class="form-control" id="memname" name="memname'+i+'" placeholder="Enter'+ 'memname">'+
                      '</div>'+
                      '<div class="form-group">'+
                        '<label for="memtype">memtype</label>'+
                        '<select class="form-control" id="memtype" name="memtype'+i+'">'+
                          '<option>trapmf</option>'+
                          '<option>trimf</option>'+
                        '</select>'+
                      '</div>'+
                      '<div class="form-group col-md-4">'+
                        '<label for="memamount">Enter the amount of your input membership function:</label>'+
                        '<input type="text" class="form-control" id="memamount" name="memamount'+i+'" placeholder="Enter memamount">'+
                      '</div>'')'
    }
   });
 });

您可以在 http://jsfiddle.net/Yelesee/h9gm0dje/1/ 看到完整的代码

如何处理最后追加后的引用？

Answer 1

您可以(并且应该)使用template literals构建你的字符串:

var inputmems = `
    <div class="form-row">
      <div class="form-row">
        <div class="form-group col-md-3">
        ...
        ...
`

使用键盘中的`符号，该符号应该位于转义键下方