FireFox - 将事件附加到动态添加的功能?

时间:2017-09-12 10:46:16

标签: javascript jquery html css firefox

我需要动态地将一个函数附加到div并传递该事件。

它适用于Chrome / IE,但不适用于FireFox。

我在FireFox控制台中收到以下错误: ReferenceError:未定义事件

如何解决这个问题?

CodePen:https://codepen.io/dsomekh/pen/YrKmaR

    <div class="container">

      <div class="tab-pane active" id="mes_informations">
        <div class="row">
          <div class="col-md-10">

            <div class="row">
              <div class="col-md-6 mes_informations_left_cont">

                <div class="inputs_grp">
                  <p>field 1</p>
                  <div class="switch_div_info">


                    <div class="switch" style="border-radius:25px;">

                      <input type="radio" class="switch-input" name="view" value="" id="week" checked="">

                      <label for="week" class="switch-label switch-label-off male">
                        <i class="fa fa-mars" aria-hidden="true"></i>
                        <label>
                          Homme
                        </label>
                      </label>

                      <input type="radio" class="switch-input" name="view" value="" id="month">
                      <label for="month" class="switch-label switch-label-on female">
                        <label>
                          Femme
                        </label> <i class="fa fa-venus" aria-hidden="true"></i></label>


                      <span class="switch-selection"></span>
                    </div>
                  </div>
                </div>
                <div class="inputs_grp">
                  <p>field 2</p>
                  <input class="form-control" id="societe" type="text">
                </div>
                <div class="inputs_grp">
                  <p>field 3</p>
                  <input class="form-control" id="siren" type="text">
                </div>
                <div class="inputs_grp">
                  <p>field 3</p>
                  <input class="form-control" id="nom_contact" type="text">
                </div>
                <div class="inputs_grp">
                  <p>field 4</p>
                  <input class="form-control" id="prenom_contact" type="text">
                </div>

              </div>


              <div class="col-md-6 mes_informations_right_cont">
                <div class="inputs_grp">
                  <p>field 5</p>
                  <input class="form-control" id="service" type="text">
                </div>
                <div class="inputs_grp">
                  <p>field 6</p>
                  <input class="form-control" id="address" type="text">
                </div>
                <div class="inputs_grp input_double">

                  <p>field 7</p>
                  <input class="form-control" id="address_fac" type="text">

                  <div class="address_input_grp">
                    <input class="form-control pull-left" id="vile" type="text">
                    <input class="form-control pull-right" id="code_postal" type="text">
                  </div>
                </div>
                <div class="inputs_grp">
                  <p>field 8</p>
                  <input class="form-control" id="nom_contact_fac" type="text">
                </div>
              </div>
            </div>


          </div>
        </div>
      </div>
    </div>

2 个答案:

答案 0 :(得分:2)

你试过了吗?

div.on("click",function(e) {Test(e);});

答案 1 :(得分:1)

Firefox不支持全局事件对象,它需要将事件作为参数传递

window.onload = function() { 

    var div = $( ".example" );

    div.click(function(event) { // needs to be here
        Test(event);
    });

}

function Test (event){
    alert(event);
}

您也可以只引用该功能,然后执行

div.click(Test);

所以你得到了

$(function() {
  $(".example").on('click', Test)
});

function Test (event) {
   console.log(event);
}
.example{
cursor:pointer;
border:1px solid black;
text-align:center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="example">When clicking on this div, you should get an alert with the event details. This does not work in FireFox.</div>

就是这样