Question

var anotherListItem = '<div class= "form-list"> 
                         <button class= "done"></button> 
                         <input type= "text"> 
                       </div>'

这不起作用。我也尝试在'每隔'/<div… </div>/'添加一个反斜杠：{{1}}但它没有帮助。我该如何解决这个问题？

Answer 1

将整个事情放在一行：

var anotherListItem = '<div class="form-list"><button class="done"></button><input type="text"></div>';

对于多行，您必须使用字符串连接：

var anotherListItem2 = '<div class="form-list">'+ 
                         '<button class="done"></button>'+  
                         '<input type="text">'+  
                       '</div>'

请记住，如果要绑定点击处理程序或类似动态添加的元素，则必须使用Event Delegation

以下是一个人为的例子：

$('#container').on('click','.done', function(){
  alert('this works');
  
  });
var anotherListItem = '<div class="form-list"><button class="done">press me</button><input type="text"></div>';
$('#container').append( anotherListItem );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="container"></div>

Answer 2

var anotherListItem = "<div class= 'form-list'>"+ 
                     "<button class= 'done'></button>"+ 
                     "<input type= 'text'>"+ 
                  "</div>"

这是小提琴，如果你想要换行放一个＆＃34; \ n＆＃34;

http://jsfiddle.net/dea5h3eh/

JQuery：在var中编写HTML块

2 个答案: