Question

$("#options").find("a").click(function() {
    var sendbuttonval = $(this).attr('id');
    document.querySelector('#save_option').addEventListener('click', function() {
        var date = document.querySelector('.date').value;
        var time = document.querySelector('.time').value;

        if (sendbuttonval=='option_1') {
            newDate = new Date(date + 'T' + time);
            var m = newDate.getTime() + newDate.getTimezoneOffset() * 60000;
            var c = Date.now();
            var t = m - c;

            setTimeout(function() {
                  alert('Vaccine Reminder');
            }, t);

            console.log(newDate);
            console.log(m);
        } else if (sendbuttonval == 'option_2') {
            alert('success');
        }
    }

HTML

 <div class="container" id="vaccines">
    <div class="row">
        <div class="col-md-3">
            <h3>Birth</h3>
            <br><br>
            <?php
                $date = $handler->query("SELECT * FROM vaccination_date WHERE calendar='Birth'");
                while ($row = $date->fetch()) {?>
                    <a href="#myModal" role="button" id="<?php echo $row['vaccine']?>" class="btn btn-primary" data-toggle="modal"><?php echo $row['vaccine']?></a>
        <div id="display_date"></div>
                    <br>
            <?php } ?>
    <h3>Week 6</h3>
          <?php
      $date1 = $handler->query("SELECT * FROM vaccination_date WHERE calendar='Week 6'");
      while ($row1 = $date1->fetch()) {?>
        <a href="#myModal" role="button" id="<?php echo $row1['vaccine']?>" class="btn btn-primary" data-toggle="modal"><?php echo $row1['vaccine']?></a>
        <br>
    <?php } ?>
        </div>

    </div>
</div>


<div id="myModal" class="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
        <div class="modal-header">

            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body" id="options">
            <?php
                $date = $handler->query("SELECT * FROM options");
                while ($row = $date->fetch()) {?>
                       <a href="#myModal1" role="button" id="option_<?php echo $row['id']?>" class="btn btn-primary" data-toggle="modal"><?php echo $row['option_name']?></a>
                    <br>
            <?php } ?>

        </div>

    </div>
</div>

×

       <h4 class="modal-title">Modal Header 1</h4>
        </div>
        <div class="modal-body">
            <section class="demo">
            <p>Remind at: &nbsp;
            <input class="date" id="date" type="date">
            <input class="time" id="time" type="time">
            <input type="hidden" id="u_id" name="u_id" value="<?php echo $_GET['open'];?>">
              <button id="save_option">Submit</button>
          </section>
        </div>
        <div class="modal-footer">
            <button class="btn btn-default" data-dismiss="modal" data-dismiss="modal" aria-hidden="true">Cancel</button>
        </div>

    </div>
</div>

尝试提醒属性后，我有以下if语句。例如，属性值为option_1，它将显示alert('Vaccine Reminder');

点击option_2后，它会显示alert('Success')和alert('Vaccine Reminder');，这是不应该发生的事情，它应该只显示Success。

我认为这里的问题是元素属性值仍然存在，这就是为什么它弄乱了if语句，是否有任何方法可以清除元素属性的值

Answer 1

您的问题是，您在另一个点击侦听器中有一个点击侦听器。每次单击第一个侦听器时，都会创建另一个单击事件。尝试将第二个侦听器移到第一个侦听器之外，或者在再次连接之前删除第二个侦听器。最好的情况是将第二个听众移到外面。您可以在侦听器外部创建一个变量，以检查是否应该执行第二个侦听器中的代码。例如：

var firstClickSet = false; $("#options").find("a").click(function() { firstClickSet = true; } document.querySelector('#save_option').addEventListener('click', function() { if(firstSetClick) { //your code };

顺便问一下，你为什么要为第一个监听器使用jquery而为第二个监听器使用本地js？

删除jquery中的元素属性值

1 个答案: