3

ユーザーがクリックしてさらに追加できる配列の入力タイプファイルがあります。私のコード部分のjavascriptには、変更に関するメソッドがあります

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

上記のコードでは、ユーザーがクリックして新しい入力タイプ ファイルを追加し、ディレクトリ内のファイルを参照したときに入力タイプ ファイルをテストしますが、すでに入力タイプ ファイル名のオレンジ色が完全に機能することをテストしていますが、名前のバナナには 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

これを使用して、それが 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 に答える