簡體   English   中英

如何觸發jQuery可選列表元素的功能

[英]How to trigger function for jquery selectable list elements

我有一個代碼,在其中實現了一個可選按鈕,就像在jQuery ui的演示中一樣( http://jqueryui.com/selectable/ )。 每當要選擇一個項目(項目1,項目2等)時,我都想觸發一個函數。 我做了幾次嘗試,但是沒有任何效果。 有人可以幫我這個忙。 我嘗試了這個:

$(".ui-selected ~ li").click(function() {
alert("hello");
});

還有這個

$("#selectable li").live('click',function() {
alert("hello");
});

我完全有這個,但還有其他命名。 我想要的是在選擇任何“可選”項時調用一個函數。

    <style>
  #feedback { font-size: 1.4em; }
  #selectable .ui-selecting { background: #FECA40; }
  #selectable .ui-selected { background: #F39814; color: white; }
  #selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
  #selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
  </style>
  <script>
  $(function() {
    $( "#selectable" ).selectable();
  });
  </script>
</head>
<body>

<ol id="selectable">
  <li class="ui-widget-content">Item 1</li>
  <li class="ui-widget-content">Item 2</li>
  <li class="ui-widget-content">Item 3</li>
  <li class="ui-widget-content">Item 4</li>
  <li class="ui-widget-content">Item 5</li>
  <li class="ui-widget-content">Item 6</li>
  <li class="ui-widget-content">Item 7</li>
</ol>
$(document).on('click', '#selectable li', function(){
   alert($(this).text());
});

這需要放在.ready封裝中:)

$(function() {
   // Right here
});

這樣,可以在選擇(或取消選擇)發生時運行函數:

$(function () {
    $("#selectable").selectable({
selected: function (event, ui) {
         alert('!')
    },
unselected: function (event, ui) {
       //do stuff
    }
});

根據此處的文檔,您需要將處理程序綁定到selectableselected事件。 例如:

$("#selectable").on('selectableselected',function(event, ui) {
    alert("hello");
});

這個小提琴對我有用,您確定要添加以下內容嗎? 您可以更改css,但是需要存在那些.js文件。

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />

http://jsfiddle.net/RHUMv/

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM