Question

问题：当通过在safari中按Enter键而不是可折叠时添加“待办事项”任务时，“周”选项卡重复。并添加了任何任务。

我不知道哪里出错了

谁能帮帮我？

HTML

<!DOCTYPE html>
<html>
    <head>        
        <title>planIt</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel='stylesheet' type='text/css' href='stylesheet.css'/>
        <script src="https://use.fontawesome.com/e886da0b59.js"></script>

         <!-- jquery -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

        <!-- jquery custom -->
        <script type="text/javascript" src="js/script.js"></script>

        <!-- jquery mobile -->  
        <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

        <!-- jquery ui -->
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

        <!-- touch -->
        <script src="js/jquery.ui.touch-punch.min.js"></script>
    </head>

    <body>
        <div data-role="page" id="pagedag">
            <div id="header" data-role="header" style="overflow:hidden;">
                <div class="logo"></div>
                <a href="#overlayPanel" class="ui-btn ui-btn-inline ui-corner-all ui-shadow"><i class="fa fa-bars" aria-hidden="true"></i></a>
            </div><!-- /header --> 
            <div data-role="panel" id="overlayPanel" data-display="overlay"> 
                <div class="logo"></div>
                <p>Dag</p>
                <p>Week</p>
                <a href="#pageone" data-rel="close" class="ui-btn ui-btn-inline ui-shadow ui-corner-all ui-btn-a ui-icon-delete ui-btn-icon-left"></a>
            </div>          
            <div data-role="tabs" id="tabs">
                <div data-role="navbar" class="custom-navbar">
                    <ul>
                        <li><a href="#dag" class="ui-btn-active" data-ajax="false">dag</a></li>
                        <li><a href="#week" data-ajax="false">week</a></li>
                    </ul>
                </div>
                <!--- dag ---> 
                <div id="dag" class="ui-body-d ui-content">
                    <h1>Tijdlijn...</h1>
                    <div data-role="collapsible">
                        <h4>To Do</h4>
                        <p>Hoi</p>
                        <form name="toDoList">
                            <input type="text" name="ListItem"/>
                        </form>
                        <button id="button" class="ui-btn">Add</button>
                    </div>

                    <div data-role="collapsible">
                        <h4>Progress</h4>
                        <p>Hoi2</p>
                        <div id="progress">
                            <ol id="sortableProgress"></ol>
                        </div>
                    </div>

                    <div data-role="collapsible">
                        <h4>Done</h4>
                        <p>Hoi3</p>
                        <div id="done">
                            <ol id="sortableDone"></ol>
                        </div>
                    </div>     
                </div>
                <!--- einde dag --->

                <!--- week ---> 
                <div id="week" class="ui-body-d ui-content">
                    <h1>Tijdlijn...</h1>
                    <div data-role="collapsible">
                        <h4>To do</h4>
                        <p>Hoi</p>
                        <form name="toDoList">
                            <input type="text" name="ListItem"/>
                        </form>
                        <button id="button" class="ui-btn">Add</button>
                    </div>

                    <div data-role="collapsible">
                        <h4>Progress</h4>
                        <p>Hoi2</p>
                        <div id="progress">
                            <ol id="sortableProgress"></ol>
                        </div>
                    </div>

                    <div data-role="collapsible">
                        <h4>Done</h4>
                        <p>Hoi3</p>
                        <div id="done">
                            <ol id="sortableDone"></ol>
                        </div>
                    </div>     
                </div>
                <!--- einde week --->
            </div>

            <div id="header" data-role="header" style="overflow:hidden;">
                <p>&copy; planIT</p>
            </div><!-- /footer -->
        </div>

    </body>
</html>

CSS

header, section {
    display: block;
    color: #fff;
}

body{
  margin: 0px;
  padding: 0px;
  background: #1abc9c;
  font-family: 'Lato',sans-serif;
}

h1{
  color: #000;
  text-align: center;
  margin-top: 20px;
}

.logo{
    content: url(assets/planit.png);
    height: 80px;
    width: auto;
    margin: auto;
    padding: 8px;
}

/* header */
#header {
    background-color: #fff;
}

/* button dag/week */
.custom-navbar ul li a {
    background: #eee; /* Old browsers */
    background: -moz-linear-gradient( #eee, #eee ) !important; /* FF3.6+ */
    background: -webkit-linear-gradient( #eee, #eee )  !important; /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient( #eee, #eee ) !important; /* Opera 11.10+ */
    background: -ms-linear-gradient( #eee, #eee ) !important; /* IE10+ */   
    border: none;
    letter-spacing: 1px;
    font-weight: normal;
}

.custom-navbar ul li a.ui-btn-active {
    background: #57cb98; /* Old browsers */
    background: -moz-linear-gradient( #57cb98, #57cb98 ) !important; /* FF3.6+ */
    background: -webkit-linear-gradient( #57cb98, #57cb98 )  !important; /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient( #57cb98, #57cb98 ) !important; /* Opera 11.10+ */
    background: -ms-linear-gradient( #57cb98, #57cb98 ) !important; /* IE10+ */   
    border: none;
    letter-spacing: 1px;
    font-weight: normal;
}

/* collapse */
.ui-collapsible-inset .ui-collapsible-heading .ui-btn {
    border-right-width: 1px;
    border-left-width: 1px;
    background-color: #57cb98;
    color: #fff;
    letter-spacing: 1px;
    font-weight: normal;
}

.ui-collapsible-inset .ui-collapsible-heading .ui-btn:hover {
    border-right-width: 1px;
    border-left-width: 1px;
    background-color: #38b77f;
    color: #fff;
    letter-spacing: 1px;
    font-weight: normal;
}


@import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,400);

body {
font: normal normal 13px/16px "Open Sans", sans-serif;
background: #ccc;
}

.container{
padding: 20px;
width: 300px;
margin: 0 auto;
margin-top: 40px;
background: white;
border-radius: 5px;}

form {
display: inline-block;
}

input{
padding: 4px 15px 4px 5px;
}

#button{
display: inline-block;
background-color:#fc999b;
color:#ffffff;
border-radius: 5px;
text-align:center;
margin-top:2px;
padding: 5px 15px;
}

#button:hover{
cursor: pointer;
opacity: .8;}

ol {padding-left: 20px;}

ol li {padding: 5px;color:#000;}

ol li:nth-child(even){background: #dfdfdf;}

.strike{text-decoration: line-through;}

li:hover{
  cursor: pointer;
 }

的jQuery

$(document).ready(
    function(){
        $('#button').click(
            function(){
                var toAdd = $('input[name=ListItem]').val();
                 $('#sortableProgress').append('<li>' + toAdd + '</li>');
            });

       $("input[name=ListItem]").keyup(function(event){
          if(event.keyCode == 13){
            $("#button").click();
          }         
      });

      $(document).on('dblclick','li', function(){
        $(this).toggleClass('strike').fadeOut('slow');    
      });

      $('input').focus(function() {
        $(this).val('');
      });

      $('#sortableProgress').sortable(); 

    }
);

Answer 1

当您将点击处理程序附加到按钮时，您将使用id $('#button')。这只会将处理程序附加到第一个按钮，并带有id＆＃39;按钮＆＃39;。

因此，当您点击“周”按钮时没有任何事情发生，因为没有为其点击事件分配任何功能。

此外，当您将新项目附加到列表时，您遇到了同样的问题。有两个名为sortableProgress的列表，但是当您执行以下操作时：

    $('#sortableProgress').append('<li>' + toAdd + '</li>')

您再次只与页面上显示的第一个元素进行交互，其ID为＆＃39; sortableProgress＆＃39;。

如果您使用dag-和week-添加ID，那么这将解决您的问题。

以下是这些更改的示例：https://jsfiddle.net/2kjc55f3/

添加任务工作不正确

1 个答案: