JQuery Mobile是否会干扰Javascript或格式化问题？

Question

I know the code works because it was tested in JSfiddle, but it's something about putting it into this HTML that then causes an error, unless JQuery Mobile it interfering? 我知道代码是有效的，因为它是在JSfiddle中测试的，但它是将它放入这个HTML然后导致错误的东西，除非它干扰JQuery Mobile？

So I have stripped away the CSS in order to test, but no matter what I take away it just causes error when adding a new item to the list. 所以我已经剥离了CSS以便进行测试，但无论我带走什么，它只会在向列表中添加新项目时导致错误。

Here is the working version: DEMO 这是工作版本： DEMO

<title>Checklist</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
    </script>
    <script src="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.1.0/jquery.mobile-1.1.0.min.js">
    </script>

<script>
$('#add').on('click', function (e) {
var $this = $(this);
var $firstRow=$this.closest('table').find('tr:first');
var $newRow = $firstRow.clone();

var input = $newRow.find(':input').remove();
input.prop('checked', false);
$newRow.empty().append(input).append('&nbsp;'+$('#textinput4').val());

$newRow.insertAfter($firstRow);
});
</script>
</head>

<body>

<div data-role="page" id="check">
        <div data-theme="a" data-role="header">
            <h3>
                Checklist
            </h3>
            <a data-role="button" data-transition="fade" href="#about" class="ui-btn-left">
                Back
            </a>

        </div>
        <div data-role="content" style="padding: 15px">
            <div data-role="collapsible-set">

            <form name="emailform" enctype="multipart/form-data" action="form-to-email.php" method="get">
              <div data-role="fieldcontain">
                 <label for='name'>Festival name: </label><br>
        <input type="text" name="name">

                    <h3>
                        Before you go
                    </h3>

                        <fieldset data-role="controlgroup" data-type="vertical">
                            <legend>
                            </legend>
                            <input name="checkbox62" id="checkbox62" type="checkbox" />
                            <label for="checkbox62">
                                Charge all batteries. Phones, cameras etc
                            </label>
                            <input name="checkbox63" id="checkbox63" type="checkbox" />
                            <label for="checkbox63">
                                Save your friends numbers
                            </label>
                            <input name="checkbox64" id="checkbox64" type="checkbox" />
                            <label for="checkbox64">
                                Check out festival site rules!
                            </label>
                            <tr><td><input name="checkbox65" id="checkbox65" type="checkbox" /></td>
                            <td><label for="checkbox65">Get directions for where you are going</label></td></tr>
                        </fieldset>

                     <h3>My items</h3>
                    <table id="myTable">
<tr>
    <td>
    <label for="checkbox65">
        <input name="checkbox65" class="checkbox65" type="checkbox" />
        Get directions for where you are going
    </label>
    </td>
</tr> 
<tr>
    <td>
        <fieldset data-role="controlgroup">
            <label for="textinput4">
                Add new item
                <input name="new_item" id="textinput4" placeholder="" value="" type="text" />
            </label>
        </fieldset>
        <button id="add">Add</button>
    </td>
</tr>
</table>


  </form>

Answer 1

This is simply a case of your event handler being bound to early. 这只是您的事件处理程序早期绑定的情况。 When you are trying to bind your click event to the add button the add button hasn't been loaded into the DOM yet. 当您尝试将单击事件绑定到添加按钮时，尚未将添加按钮加载到DOM中。 One thing which you can do is simply move your script to the end of your body. 您可以做的一件事就是将脚本移动到身体末端。

A better solution would be to use event delegation, for example 例如，更好的解决方案是使用事件委托

    $(document).on('click', '#add', function(e) {
          var $this = $(this);
          var $firstRow = $this.closest('table').find('tr:first');
          var $newRow = $firstRow.clone();

          var input = $newRow.find(':input').remove();
          input.prop('checked', false);
          $newRow.empty().append(input).append('&nbsp;' + $('#textinput4').val());

          $newRow.insertAfter($firstRow);
      });

(You might still want to move your script to the end of your page for performance reasons so that it doesn't block the loading of your page). （出于性能原因，您可能仍希望将脚本移动到页面末尾，以便它不会阻止加载页面）。

JQuery Mobile是否会干扰Javascript或格式化问题？

问题描述

1 个解决方案

解决方案1
0 2012-12-06 17:13:48

JQuery Mobile是否会干扰Javascript或格式化问题？

问题描述

1 个解决方案

解决方案1 0 2012-12-06 17:13:48

解决方案1
0 2012-12-06 17:13:48