Question

我想在点击另一个click对象时在file输入上触发button事件。我知道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

ImportError: cannot import name c

如上所述，您通过将其重新用作参数名称来覆盖变量<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()

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

试图在js上触发“click”事件不起作用

1 个答案: