3

我有数组的输入类型文件，用户可以单击添加更多。在我的代码部分javascript中，我有更改方法

    jQuery('.focus_image').on('change', function () {
            alert("hello");

上面的代码我测试输入类型文件当用户点击添加新的输入类型文件并浏览目录中的文件但我测试已经输入类型文件名橙色工作正常但名称香蕉不显示你好什么代码错了？帮我解决这个问题。下面是我的完整代码

<table>
    <tr>
        <th>
            <label for="test">test</label>
        </th>
        <td>
            <div id="popup1">
                <div id="image-zone" style="width:200px;float:left;text-align:center">
                    <input type='button' class='button-primary' value='Add' id='add_focus'>
                    <input type="file" class="focus_image" name="orange">
                </div>
            </div>
            <script type="text/javascript">
                var count_focus = 0;
                var num_focus = count_focus;
                var temp_focus = count_focus + 1;
                var name_focus = 'Focus_DIV' + temp_focus;

                jQuery(document).ready(function($) {

                    $("#add_focus").click(function() {
                        if (num_focus == 10) {
                            alert("Only 10 textboxes allow");
                            return false;
                        }
                        id_div = 'Focus_DIV' + temp_focus;
                        file_id_name = "file_Focus_DIV" + temp_focus;
                        var newTextBoxDiv = $(document.createElement('div')).attr("id", 'Focus_DIV' + temp_focus);
                        newTextBoxDiv.html('<input type="file" id="' + file_id_name + '" name="banana" class="focus_image">');
                        newTextBoxDiv.appendTo("#image-zone");
                        temp_focus++;

                        name_focus = 'Focus_DIV' + temp_focus;
                        num_focus++;

                    });

                });
                //Below code is doesn't work when add new input type file
                jQuery('.focus_image').on('change', function() {
                    alert("hello");
                    //                  
                });
            </script>
        </td>
    </tr>
</table>

问题可以解决 这个问题可以通过在代码中html动态添加新元素必须重新注册事件来解决

4

4 回答 4

1

在下面的 jsfiddle 上查看您的代码

http://jsfiddle.net/guNvz/

实际上有一点安排的问题。如果您在 HTML 中动态添加新元素，而不是在该元素上添加新元素，则需要重新注册该事件。

尝试使用以下脚本：

<script type="text/javascript">

        var count_focus = 0;
            var num_focus = count_focus;
            var temp_focus = count_focus + 1;
            var name_focus = 'Focus_DIV' + temp_focus;

            jQuery(document).ready(function($) {

                jQuery("#add_focus").click(function() {
                    if (num_focus == 10) {
                        alert("Only 10 textboxes allow");
                        return false;
                    }
                    id_div = 'Focus_DIV' + temp_focus;
                    file_id_name = "file_Focus_DIV" + temp_focus;
                    var newTextBoxDiv = $(document.createElement('div')).attr("id", 'Focus_DIV' + temp_focus);
                    newTextBoxDiv.html('<input type="file" id="' + file_id_name + '" name="banana" class="focus_image">');
                    newTextBoxDiv.appendTo("#image-zone");
                    temp_focus++;

                    name_focus = 'Focus_DIV' + temp_focus;
                    num_focus++;
             jQuery('.focus_image').unbind('change').change(function() {
                alert("hello");
                //                  
            });
                });

            });
            //Below code is doesn't work when add new input type file


    </script>

让我知道你有疑问。

谢谢..！！

于 2013-05-18T04:56:23.150 回答
0

不要那样使用on，像这样使用它，使用它#image-zone会将这个事件附加到现在有 css 类的任何东西focus_image上#image-zone，如果它们是动态添加的。

jQuery(document).ready(function($) {
 $('#image-zone').on('change', '.focus_image', function() {
  // Your code
 });
 // Your other code like the click event
});

测试这个小提琴，它显示了你应该怎么做

于 2013-05-18T04:38:25.263 回答
0

使用它，以排除这是一个 CSS 问题 

  $('#banana').focus(function() {
      alert('Handler for .focus() called.');
    });
于 2013-05-18T04:48:54.893 回答
0

将该on事件函数保存在就绪函数中

这是修改后的代码：

<table>
    <tr>
        <th>
            <label for="test">test</label>
        </th>
        <td>
            <div id="popup1">
                <div id="image-zone" style="width:200px;float:left;text-align:center">
                    <input type='button' class='button-primary' value='Add' id='add_focus'>
                    <input type="file" class="focus_image" name="orange">
                </div>
            </div>
            <script type="text/javascript">
                var count_focus = 0;
                var num_focus = count_focus;
                var temp_focus = count_focus + 1;
                var name_focus = 'Focus_DIV' + temp_focus;

                jQuery(document).ready(function($) {

                    $("#add_focus").click(function() {
                        if (num_focus == 10) {
                            alert("Only 10 textboxes allow");
                            return false;
                        }
                        id_div = 'Focus_DIV' + temp_focus;
                        file_id_name = "file_Focus_DIV" + temp_focus;
                        var newTextBoxDiv = $(document.createElement('div')).attr("id", 'Focus_DIV' + temp_focus);
                        newTextBoxDiv.html('<input type="file" id="' + file_id_name + '" name="banana" class="focus_image">');
                        newTextBoxDiv.appendTo("#image-zone");
                        temp_focus++;

                        name_focus = 'Focus_DIV' + temp_focus;
                        num_focus++;

                    });
                    //keep the code here
                    jQuery('.focus_image').on('change', function() {
                        alert("hello");
                        //                  
                    });
                });
                //Below code is doesn't work when add new input type file
                //Removed the code from here
            </script>
        </td>
    </tr>
</table>

JSFiddle

于 2013-05-18T04:51:21.403 回答