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不工作

回答

相關問題