javascript - How to select closet element in jQuery and fire change event to file input?

Question

I have a table with 2 TDs, its HTML is something like below: Here I want to send ajax request when as soon as file input change.

File is changing when change-image button click.

  <tbody> 
      <tr>
        <td class='center'>
          <div class='p-img'>
            <img class='img-thumbnail' src='269_thumb_1543210907.jpg' width='200' height='100'>
            <div class='loader'></div>
          </div>
        </td>
        <td class='center'>
          <div class='upload-btn-wrapper'>
            <button class='btn btn-minier btn-purple change-image ' data-image_id='1374'>Change Image</button>
            <input type='file' name='myfile' />
          </div>
        </td>    
      </tr>
      <tr>
        <td class='center'>
          <div class='p-img'>
            <img class='img-thumbnail' src='269_thumb_1543211961.jpg' width='200' height='100'>
            <div class='loader'></div>
          </div>
        </td>
        <td class='center'>
          <div class='upload-btn-wrapper'>
            <button class='btn btn-minier btn-purple change-image' data-image_id='1380'>Change Image</button>
            <input type='file' name='myfile' />
          </div>
        </td>    
      </tr>             
    </tbody>

Now I want select which button is clicked by user to send ajax request.

Can anybody tell me how detect which button is click and how fire change event to its file input?

This is how I tried it, but not sure how to proceed. Sorry I am new to jquery.

$('#property_images').on('click', '.change-image', function(e){
  e.preventDefault();

  var changeImg =  $(this).closest('tr').children('td').find('.change-image');   
  var image_id = $(this).data("image_id")

});

标签： javascriptjquery

Answer 1

由于某种原因，您引用了被单击的按钮，但您在表格行中搜索该按钮。

同一个TD里面的按钮的文件输入，所以你需要看TD，而不是TR

$(this).closest("td").find([type='file'])

或者只是使用next()

$(this).next([type='file'])