Question

了解我

＆＃13;

<!DOCTYPE html>
<html>
<head>
  
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">

  <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
 
  <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<script>
$('.deleteMe').live('click', function(){
    $(this).parent().remove();
    $('#contributionList').listview('refresh');
});

 $( document ).ready(function() {
         $('#addContribution').click(function () {
               var newAmount = $('#contributionAmount').val();
               if (newAmount) {
                 $('#contributionList').append('<li><a>' + newAmount + '</a><a class="deleteMe"></a></li>').listview('refresh');
                    $('#contributionAmount').val('');
               } else {
                    alert('Nothing to add');
               } 
     
     });
 });
</script>

</head>
<body>

<div data-role="page" id="home">
    <div data-role="content">
        <ul data-role="listview" id="contributionList" data-split-icon="delete" data-split-theme="d">
           <li id="l1"><a>5.00</a><a id="1" class="deleteMe"></a></li>
           <li><a>10.00</a><a class="deleteMe"></a></li>
           <li><a>15.00</a><a class="deleteMe"></a></li>
           <li><a>20.00</a><a class="deleteMe"></a></li>
           <li><a>25.00</a><a class="deleteMe"></a></li>
           <li><a>50.00</a><a class="deleteMe"></a></li>
           <li><a>100.00</a><a class="deleteMe"></a></li> 
        </ul>
        <br />
        <fieldset class="ui-grid-a">
           <div class="ui-block-a">
              <input type="text" placeholder="Add new Amount" id="contributionAmount" />
           </div>
           <div class="ui-block-b">
             <input type="button" value="Add" id="addContribution"/>
           </div>
        </fieldset>
    
    </div>
</div>

</body>
</html>

＆＃13;

^此代码在网站上有效，但是当我将其添加到HTML时，这样就无法工作了......我不知道为什么！

看看最后一个答案，有人给我发了一个链接就是工作！

但是当我在HTML中添加它不起作用 -------＆gt;＆lt; ＆GT;＆LT; ＆GT;＆LT; 有些人说你不使用$（document）.ready（function（）{}）;

有些人说你可以使用$（＆＃39; ID＆＃39;）。（＆＃39;点击＆＃39;，function（）{}）

^我在我的电脑里做到了这一点！但我没有在网站上测试它

＆LT;＆GT;＆LT;＆GT;＆LT; ---------- 问题可能在我的笔记本电脑Mac Os X中，如果代码工作那么它

当我在HTML中添加它时，

应该工作

基本上代码在网站上工作，但在HTML里面不起作用！

Answer 1

<script>
    $( document ).ready(function() {
         $('#addContribution').click(function () {
               var newAmount = $('#contributionAmount').val();
               if (newAmount) {
                    $('#contributionList')
                         .append('<li><a>' + newAmount + '</a><a class="deleteMe"></a></li>')
                         .listview('refresh');
                    $('#contributionAmount').val('');
               } else {
                    alert('Nothing to add');
               }); 
     });
</script>

脚本无法正常工作，因为您绑定的dom元素即;'＃contributionsAmount'在浏览器解析脚本时不可用。一旦html dom准备就绪，document.ready事件将由浏览器编译。

Answer 2

您必须在document.ready事件中注册您的点击事件。加载DOM后的document.ready事件调用。因此，当您的旧脚本执行DOM尚未就绪时，您无法注册您的活动。

Answer 3

如果您不想执行此jQuery ready事件，可以使用on，事件处理程序附件jQuery .on()

将函数绑定到事件

<script>
$('#addContribution').on('click',function() {      
    var newAmount = $('#contributionAmount').val();
</script>

Answer 4

此代码可以正常工作

        $( document ).ready(function() {
         $('#addContribution').click(function () {
               var newAmount = $('#contributionAmount').val();
               if (newAmount) {
                 $('#contributionList').append('<li><a>' + newAmount + '</a><a class="deleteMe"></a></li>').listview('refresh');
                    $('#contributionAmount').val('');
               } else {
                    alert('Nothing to add');
               } 
        });
      });

看看这个小提琴http://jsfiddle.net/uiupdates/NXrRp/492/

jQuery和javascript（＆＃39;＃ID＆＃39;）＃update1 #helpsme

4 个答案: