试图在js上触发“click”事件，是吗

Question

我想在单击另一个button对象时，在file输入上触发一个click事件。我知道js代码运行到调用modelObject.click()语句的地步，但是目标对象没有反应

代码如下：

{% extends "StylingApp/base_site.html" %}

{% block title %} Álbumes {% endblock title %}

{% block stylesheets %}
  {{ block.super }}
{% endblock stylesheets %}

{% block content %}
  <div class="right_col" role="main">
    <div class="">
      <div class="page-title">
        <div class="title_left">
          <h3> Álbum: {{ album.name }}</h3>
          <form method="POST" id="new_files">
            <div type="button" class="btn btn-success" id="add-photos"><span class="fa fa-photo"></span> Agregar</div>
            <input type="file" id="select-photo-files" value="" style="opacity: 0">
          </form>
        </div>

        <div class="title_right">
          <div class="col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search">
             <div class="input-group">
              <input type="text" class="form-control" placeholder="Buscar...">
              <span class="input-group-btn">
                  <button class="btn btn-default" type="button">Ir</button>
              </span>
            </div>
          </div>
        </div>
      </div>

      <div class="clearfix"></div>

      <div class="row">
        <div class="col-md-12">
          <div class="x_panel">
            <div class="x_content">
              <div class="row">
                {% for photo in photos %}
                <div class="col-md-55">
                  <div class="thumbnail">
                    <div class="image view view-first">
                      <img style="width: 100%; display: block;" src="{{ photo.photo.url }}" alt="image" />
                      <div class="mask no-caption">
                        <div class="tools tools-bottom">
                          <a href="{{ photo.photo.url }}"><i class="fa fa-link"></i></a>
                          <a href="#"><i class="fa fa-times"></i></a>
                        </div>
                      </div>
                    </div>
                    <div class="caption">
                      <p>{{ photo.description }}</p>
                    </div>
                  </div>
                </div>
                {% endfor %}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div> 
{% endblock content %}

{% block javascripts %}
  {{ block.super }}
  <script type="text/javascript">
     var addPhotosButton = document.getElementById('add-photos');
     var selectPhotoFilesInput = document.getElementById('select-photo-files');

    addPhotosButton.addEventListener('click', function(selectPhotoFilesInput){
      selectPhotoFilesInput.click();
    });
  </script>
{% endblock javascripts %}

Answer 1

<script type="text/javascript">
     var addPhotosButton = document.getElementById('add-photos');
     var selectPhotoFilesInput = document.getElementById('select-photo-files');

    addPhotosButton.addEventListener('click', function(selectPhotoFilesInput){ // <  you override the name of the variable defined above.
      selectPhotoFilesInput.click();
    });
</script>

如上所述，通过将变量selectPhotoFilesInput重用为参数名来重写它的名称，因此，在错误的对象上调用了click()

试试这个：

<script type="text/javascript">
     var addPhotosButton = document.getElementById('add-photos');
     var selectPhotoFilesInput = document.getElementById('select-photo-files');

    addPhotosButton.addEventListener('click', function(event){ 
      selectPhotoFilesInput.click();
    });
</script>

如果您还不知道，事件侦听器会将事件作为参数接收；）