Question

在下一页＆＃34; https://www.capgemini.com/new-ways-to-accelerate-innovation＆＃34;。有多个部分＆＃34;展开＆＃34;按钮，当您单击展开按钮时，表单将被公开。这里的问题是无法将点击事件附加到＆＃34;提交＆＃34;按钮。

我尝试过使用addeventlistner，但事件没有被分配。

我该怎么做，请告知。

https://www.capgemini.com/new-ways-to-accelerate-innovation

展开按钮位于以下代码中。

<div class="exp_article-header-bg">
  <div class="exp_article-header-inner">
    <h2 class="exp_article-header-title">TechnoVision 2017</h2>
    <div class="exp_article-header-author"></div>
    <div class="exp_article-header-lead">
      <p>
      TechnoVision 2017 gives you a framework to create a new digital story to solve problems and grasp new opportunities. Our 37 technology building blocks will help you to navigate the technology maze and give a clear direction to your business.
      </p>
    </div>
    <div class="exp_article-header-expand">
      **
      <div class="exp_link exp_link--white exp_link--expand">
        <span class="exp_link-label">EXPAND</span>**
        <span class="exp_button-arrow exp_button-arrow--down"></span>
      </div>
    </div>
  </div>
</div>

单击上面的“展开”按钮时，表单会显示。 “提交”按钮的格式如下所示。

<form accept-charset="UTF-8" method="post" action="https://go.pardot.com/l/95412/2017-08-09/2tfbfg" class="form" id="pardot-form">
    <style type="text/css">
      form.form p label {
        color: #000000;
      }
    </style>

    <p class="form-field  email pd-text required    ">
      <label class="field-label" for="95412_59459pi_95412_59459">Email Address</label>
      <input type="text" name="95412_59459pi_95412_59459" id="95412_59459pi_95412_59459" value="" class="text" size="30" maxlength="255" onchange="piAjax.auditEmailField(this, 95412, 59459, 44072473);">
    </p>
    <div id="error_for_95412_59459pi_95412_59459" style="display:none"></div>
    <p style="position:absolute; width:190px; left:-9999px; top: -9999px;visibility:hidden;">
      <label for="pi_extra_field">Comments</label>
      <input type="text" name="pi_extra_field" id="pi_extra_field">
    </p>

    <!-- forces IE5-8 to correctly submit UTF8 content  -->
    <input name="_utf8" type="hidden" value="☃">

    <p class="submit">
      <input type="submit" accesskey="s" value="Submit Now">
    </p>

    <script type="text/javascript">
      //<![CDATA[
      var anchors = document.getElementsByTagName("a");
      for (var i = 0; i < anchors.length; i++) {
        var anchor = anchors[i];
        if (anchor.getAttribute("href") && !anchor.getAttribute("target")) {
          anchor.target = "_top";
        }
      }
      //]]>
    </script>
    <input type="hidden" name="hiddenDependentFields" id="hiddenDependentFields" value="">
  </form>

Answer 1

有CSS显示：无;对于需要扩展的元素。当点击展开时，调用一个javascript函数来检查元素是否被隐藏，如果隐藏则更改CSS显示：block;。

检查以下工作代码。

<body>
<div class="exp_article-header-bg">
    <div class="exp_article-header-inner">
        <h2 class="exp_article-header-title">TechnoVision 2017</h2>

        <div class="exp_article-header-author"></div>
        <div class="exp_article-header-lead"><p>TechnoVision 2017 gives you a framework to create a new digital story to
            solve problems and grasp new opportunities. Our 37 technology building blocks will help you to navigate the
            technology maze and give a clear direction to your business.</p>
        </div>
        <div class="exp_article-header-expand">
            **
            <div class="exp_link exp_link--white exp_link--expand">
                <button onclick="myFunction()" class="exp_link-label">EXPAND</button>
                **
                <span class="exp_button-arrow exp_button-arrow--down" id="expandDiv"
                      style="color: #000066; background-color: gainsboro;display: none;">I Got Expanded</span></div>
        </div>
    </div>
</div>
</body>

Javascript功能： -

<script>
function myFunction() {
    var x = document.getElementById('expandDiv');
    if (x.style.display === 'none') {
        x.style.display = 'block';
    } else {
        x.style.display = 'none';
    }
}
</script>

检查plnkr：https://plnkr.co/edit/MWKYxmV6Jk2eId3Owt2u?p=preview

Answer 2

你的表格在哪里开放？如果你正在使用jquery，只需定位表单id并执行.submit（）

Answer 3

您将要使用＆＃39; onsubmit＆＃39;事件监听器，很可能是一个预防而不是点击事件。

document.querySelector("#submit-button").addEventListener("submit", function(event) {
    //your stuff here
    event.preventDefault();
}, false);

无法将事件附加到

3 个答案: