jQuery - 点击按钮，模拟输入[type =“file”]。仅在父元素中更改

我不确定标题是否说明了我正在尝试执行的操作，但我不知道如何命名该问题。jQuery - 点击按钮，模拟输入[type =“file”]。仅在父元素中更改

我想添加一些样式来输入[type =“file”]元素使用CSS和jQuery。这里是我的代码：

<div class="input-file"> 
    <input type="file"><label>Select file...</label><button type="button">...</button> 
    </div>

其中输入具有显示：无风格所以是不可见的。

的Javascript：

$('.input-file > button').live('click',function() { 
$('input[type="file"]').click(); });

它的工作原理很好的，如果只有1个元素是页面上，但如果有例如3，每当我点击按钮1，将火功能的3倍。我希望它只响应它的父元素，它是<div class="input-file">

我怎样才能使用.parent或.before或任何函数可以实现这一目标？

编辑：

@Chandu有一个很好的解决方案。另外，另一种选择是$（this）.prev（）。prev（）。click（）;如果元素是静态的并始终处于相同的位置。

谢谢@Chandu。

来源

2012-07-10 phpDev

使用'on'取代'live' – 2012-07-10 16:53:42

试试这个：

$('.input-file > button').live('click',function() { 
    $(this).closest('.input-file').find('input[type="file"]').click(); 
});

更新： 如果您正在使用jQuery> = 1.7，然后使用这个版本与on：

$('.input-file').on('click', 'button',function() { 
    $(this).closest('.input-file').find('input[type="file"]').click(); 
});

来源

2012-07-10 16:52:52 Chandu

+1你可以替换''on' live'？ – 2012-07-10 16:55:53

@ user1042031：Jus做到了...... – Chandu 2012-07-10 16:56:10

就是这样！谢谢。我还找到了另一个解决方案，我将在第一篇文章中发布。 – phpDev 2012-07-10 16:56:30

<script type="text/javascript"> 
    $(function() { 
     $('#btn-upload').click(function (e) { 
      e.preventDefault(); 
      $('#file').click(); 
     }); 
    }); 
</script> 

<style type="text/css"> 
    #file { display:none; } 
</style> 

<div> 
    <input type="file" id="file" name="file" /> 
    <button type="button" id="btn-upload">Image</button> 
</div>

来源

2014-02-14 12:57:25 MarceloMadnezz

您可以奥斯陆使用标签模拟点击标签。标签标签模仿点击当前表单的输入，如为属性。 Examle：

<label for="file-input"> 
    Click me! 
    <input type="file" id="file-input" style="display:none;" /> 
</label>

来源

2014-07-06 13:11:28 Vitalii

jQuery - 点击按钮，模拟输入[type =“file”]。仅在父元素中更改

回答

相关问题