jquery関数のボタンクリック時のAjaxリクエスト

Question

このページをビルドしています。私はajaxを使ってファイル入力を行っていますが、ファイルが変更されたときにjqueryを起動できません。これは普通のことですか、これはちょうどうまくいくはずですか？私は、入力の種類のテキストフィールドに表示されるファイル名を取得しようとしています。

私のAJAX呼び出し

$('.wijzigproduct').on('click', function() { 
    var productvalue = $(this).val(); 
    $.ajax({ 
     url: "includes/productwijzigen.php?q=" + productvalue, 
     success: function (result) { 
      $('#editproduct').html(result); 
     } 
    }); 
}); 

私の入力フィールド：

<div class="input-group"> 
       <span class="input-group-btn"> 
        <span class="btn btn-default btn-file"> 
         Bladeren… <input type="file" name="imgInpnew" id="imgInpnew"> 
        </span> 
       </span> 
       <input type="text" class="form-control" id='imgOutpnew' readonly> 
      </div> 
      <img id='imgshownew'/> 

私のjqueryの：

$('#imgInpnew').change(function() { 
      var filename = $('#imgInpnew').val(); 
      filename = filename.substring(filename.lastIndexOf("\\") + 1, filename.length); 
      $('#imgOutpnew').val(filename); 
     }); 

Answer 1

change()にイベントを添付し、その後DOMに要素を追加し、する必要がどの意志既に存在する要素にのみハンドラを添付してください。これは、将来作成される要素に束縛されません。

jQueryを使用してDOMを生成したので、on()を使用して「委任」バインディングを作成する必要があります。ここでは、コードのソリューションベースは、あなたがjsのスニペットことを確認できますが、jsfiddle.net/a70svxto

$.ajax({ 
 
    url: "/echo/js/?js=<div class=\"input-group\"><span class=\"input-group-btn\"><span class=\"btn btn-default btn-file\">search… <input type=\"file\" name=\"imgInpnew\" id=\"imgInpnew\"></span></span><input type=\"text\" class=\"form-control\" id='imgOutpnew' readonly></div><img id='imgshownew\'/>", 
 
    success: function(result) { 
 
    $('#div').html(result); 
 
    } 
 
}); 
 

 
$('#div').on('change', '#imgInpnew', function() { 
 
    var filename = $('#imgInpnew').val(); 
 
    filename = filename.substring(filename.lastIndexOf("\\") + 1, filename.length); 
 
    $('#imgOutpnew').val(filename); 
 
});

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

Answer 2

だけでなく、あなたがDOMに存在しない要素に変更イベントを装着しています。

あなたが最初にあなたが「直接」結合と呼ばれ、使用している結合要素

$.ajax({ 
    url: "/echo/js/?js=<div class=\"input-group\"><span class=\"input-group-btn\"><span class=\"btn btn-default btn-file\">search… <input type=\"file\" name=\"imgInpnew\" id=\"imgInpnew\"></span></span><input type=\"text\" class=\"form-control\" id='imgOutpnew' readonly></div><img id='imgshownew\'/>", 
    success: function(result) { 
    $('#div').html(result); 
    $('#imgInpnew').change(function() { 
    var filename = $('#imgInpnew').val(); 
    filename = filename.substring(filename.lastIndexOf("\\") + 1, filename.length); 
    $('#imgOutpnew').val(filename); 
}); 
    } 
}); 

https://jsfiddle.net/a70svxto/