Question

下面是我的html和javascript。 Js位于app.js文件中，html是是或否。在javascript的底部，我有代码，应该点击事件。现在只是看它是否检测到html中p元素的点击，但到目前为止还没有工作。

有人能够发现为什么没有发生这个事件吗？

其他jQuery int代码确实有效，但是这个jQuery不是由函数调用的，而是基于严格使用选择器调用的，这让我相信我在项目中使用document.ready的方式有问题。

HTML

 <div class="question animated slideInUp">

<h3>Do you know your individual monthly rent cost?</h3>

    <div class="rentanswer">
    <p>Yes</p><p>No</p>
        </div>
<!--
    <p>If not, we'll get the average rent of a zip code for you from Zillow</p>
    <form  onsubmit="Obj(this.p.name,this.p.value)">
        <input type="number"  id="p" name="rent" placeholder="Leave blank if N/A" >
         <input id="s" type="submit" value="Submit">
    </form>
-->

</div>

使用Javascript：

 var quest = ['../partials/income.hbs', '../partials/state.hbs', '../partials/rent.hbs', '../partials/zip.hbs', '../partials/roomate.hbs', "../partials/summary.hbs"];
    var iterator = 0;
    //creates object that gets sent to api
    function Obj(name, vale){

        event.preventDefault(); //prevents pg refresh

        $('.form').load(quest[iterator], function () {
            $('.bar p#' + name).css("border","2px solid black").addClass('enter').next().css({"border":"2px solid black","pointer-events":"auto","cursor":"pointer"});
        });
        //loads next html question to page
       if(name){

            data[name] = vale;
        }
        //move array accessor up to next question
        iterator++;

        console.log(data);
    }
    var data = {};


    //user can click already submitted values to load that orignal question and change it/
    function redo(q, id) {
        q = Number(q);
        //if the current queston on the page is not the one being clicked we then change it to the one being clicked
        if (q + 1 != iterator) {
            $('.form').load(quest[q], function () {


                $('#p').val(data[id]);
            });
            iterator = q + 1;
        };
    };

    $(document).ready(function(){
    $('.rentanswer p').on('click',function(){
       console.log('hey'); 
    });
    });

Answer 1

您可以使用解决方案https://jsfiddle.net/g8xt5g4y/

＆＃13;

$(document).ready(function(){
  $(document).on('click','.rentanswer p',function(){
     console.log($(this).text()); 
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Do you know your individual monthly rent cost?</h3>

<div class="rentanswer">
  <p>Yes</p>
  <p>No</p>
</div>

＆＃13;

我相信您的HTML动态呈现，这就是click方法无效的原因。

尝试event delegate（在上面的代码中提到）。

希望这会对你有所帮助。

jQuery Click事件未在元素单击时触发

1 个答案: