1 Form，2 Divs，JQuery不工作

我有一个包含2个div的表单，每个div都是一个输入，当我按下与每个输入相关的按钮时，什么也没有发生，我相信它有一些事情要做与形式的divs。我知道这个代码在没有2个div的情况下工作，但我需要div，所以我可以按照它的方式布局。有什么建议么？1 Form，2 Divs，JQuery不工作

我知道我忘了添加JQuery到这篇文章，这是我的错误，但即使使用JQuery添加它不工作在我的项目中，这个代码是基于。

直播代码：https://jsfiddle.net/1brk3npL/

$(document).ready(function() { 
 
    $('#addLikes').click(function() { 
 
    if ($('#likes').val() === "") { 
 
     alert("Likes input is empty."); 
 
    } else { 
 
     $('#likesOutput').append($("<option></option>") 
 
     .attr("value", $('#likes').val()).text($('#likes').val())); 
 
    } 
 
    }); 
 
    $('#removeLikes').click(function() { 
 
    $('#likesOutput option:selected').remove(); 
 
    }); 
 

 
    $('#addDislikes').click(function() { 
 
    if ($('#dislikes').val() === "") { 
 
     alert("Dislikes input is empty."); 
 
    } else { 
 
     $('#dislikesOutput').append($("<option></option>") 
 
     .attr("value", $('#dislikes').val()).text($('#dislikes').val())); 
 
    } 
 
    }); 
 
    $('#removeDislikes').click(function() { 
 
    $('#dislikesOutput option:selected').remove(); 
 
    }); 
 
});

select { 
 
    width: 250px; 
 
} 
 
input[type=text] { 
 
    font-family: "ProximaRegular", sans-serif; 
 
    width: 250px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div id="preferenceDiv"> 
 
    <form id="preferenceInput"> 
 
    <div style="float:left; position:relative; width : 50%;"> 
 

 
     Likes: 
 
     <br/> 
 
     <input type="text" id="likes" /> 
 
     <br /> 
 
     <button id="addLikes" type="button">Add Likes</button> 
 
     <button id="removeLikes" type="button">Remove Likes</button> 
 
     <br />Selected Likes: 
 
     <br /> 
 
     <select id="likesOutput" multiple="multiple"></select> 
 

 
    </div> 
 

 
    <div style="float:left; position:relative; width : 50%;"> 
 

 
     Dislikes: 
 
     <br/> 
 
     <input type="text" id="dislikes" /> 
 
     <br /> 
 
     <button id="addDislikes" type="button">Add Dislikes</button> 
 
     <button id="removeDislikes" type="button">Remove Dislikes</button> 
 
     <br />Selected Dislikes: 
 
     <br /> 
 
     <select id="dislikesOutput" multiple="multiple"></select> 
 

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

来源

2016-11-14 Jackson Sentzke

当你包含jQuery时，你的代码看起来很好：https：//jsfiddle.net/1brk3npL/1/ –

你的JSFiddle在两个地方是错误的：包括jQuery和头部运行，而不是onload。查看我为你制作的片段 – mplungjan

这很奇怪;我忘了在我的例子中包含JQuery，我的错误。但是这个例子意味着代表我正在开发的一个项目，并且我已经包含了JQuery，并且所有事情都以非常相似的方式完成，但这并不起作用。 :(非常奇怪 –

好，所以代码开始发挥预期yesturday。我不知道发生了什么，我没有改变代码。但是一分钟它不工作，然后突然它。

来源

2016-11-15 08:19:16

-1

加入jQuery和还加$参考jQuery的。

Chnage的JS的第一行这样

jQuery(document).ready(function ($) {

即使你包括jQuery的有参考失踪。 PLease改变它，它会工作。

来源

2016-11-14 11:11:43

-1

只需添加以下jQuery库在这个https://jsfiddle.net/1brk3npL/ HTML部分，看看它的工作:)

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

感谢

没有定义

来源

2016-11-14 11:13:58

-1

jQuery的。

我刚刚在你的jsfiddle上添加了jQuery，并且你的代码有效。

点击JavaScript选项 - >框架&扩展 - >选择jQuery的版本 - >点击运行

来源

2016-11-14 14:07:53

1 Form，2 Divs，JQuery不工作

回答

相关问题