选择其中包含href的项目

Question

我正在创建一个文件管理器，您可以在其中批量编辑文件，但我无法使用select函数。

我正在使用此Cute File Browser。我已将ul元素设为id并将此脚本添加到页面中：

$("#test li").click(function() {
    alert(this.id); // get id of clicked li
});

但是当我点击某个项目时，它会打开其网址而不是选择它。

Answer 1

可能必须使用link元素并使用e.preventDefault();

$("#test li a").click(function(e) {
        e.preventDefault();
        alert($(this).parent().id); // get id of clicked li
});

希望这有帮助。

Answer 2

您需要阻止导航到点击的网址的默认行为，如果您的元素是动态添加的，则需要使用jquery的.on()' 进行事件委派：

编辑添加了jQuery UI dialog()的使用，以帮助您开始更改文件的名称。当然，您必须修改modifyFile()才能实际更新服务器上的文件

我在查看您提供的页面时，从检查器复制了下面的html。有一件事我注意到你所有生成的li元素都具有相同的id为“1”。你需要解决这个问题。 Ids必须是唯一的，无论生成你的li元素应该给每个元素一个唯一的id。

$(function() {
    var dialog, form,

        dialog = $("#dialog-form").dialog({
            autoOpen: false,
            height: 300,
            width: 350,
            modal: true,
            buttons: {
                "Submit Changes": function() {
                    var newName = $('#newName').val(); // don't forget to do some checks on the value here
                    modifyFile(newName, dialog);
                },
                Cancel: function() {
                    dialog.dialog("close");
                }
            },
            close: function() {
                form[0].reset();
            }
        });

    form = dialog.find("form").on("submit", function(event) {
        event.preventDefault();
        var newName = $('#newName').val(); // don't forget to do some checks on the value here
        modifyFile(newName, dialog);
    });


    $(document).on('click', '#test li', function(e) {
        e.preventDefault();
        $('#newName').val(this.id); // get id of clicked li
        dialog.dialog("open");
    });

});

function modifyFile(newName, dialog) {
    // do stuff with your new name here like update it on your server
    alert('File name changed to: ' + newName);
    dialog.dialog("close");

}

<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<ul class="data animated" id="test" style="">
  <li class="files" id="1">
  	<a href="Downloads/chipzel-Super-HexagonEP(2012)[FLAC]/01-Courtesy.flac" title="Downloads/chipzel-Super-HexagonEP(2012)[FLAC]/01-Courtesy.flac" class="files">
    	<span class="icon file f-flac">.flac</span><span class="name">01-Courtesy.flac</span> 
        <span class="details">17 MB</span>
    </a> 
  </li>
  <li class="files" id="1">
  	<a href="Downloads/chipzel-Super-HexagonEP(2012)[FLAC]/02-Otis.flac" title="Downloads/chipzel-Super-HexagonEP(2012)[FLAC]/02-Otis.flac" class="files">
    	<span class="icon file f-flac">.flac</span><span class="name">02-Otis.flac</span> 
        <span class="details">18 MB</span>
    </a> 
  </li>
  <li class="files" id="1">
  	<a href="Downloads/chipzel-Super-HexagonEP(2012)[FLAC]/03-Focus.flac" title="Downloads/chipzel-Super-HexagonEP(2012)[FLAC]/03-Focus.flac" class="files">
  		<span class="icon file f-flac">.flac</span><span class="name">03-Focus.flac</span> 
        <span class="details">21 MB</span>
    </a> 
  </li>
  <li class="files" id="1"> 
  	<a href="Downloads/chipzel-Super-HexagonEP(2012)[FLAC]/cover.jpg" title="Downloads/chipzel-Super-HexagonEP(2012)[FLAC]/cover.jpg" class="files">
   		 <div style="display:inline-block;margin:20px 30px 0px 25px;border-radius:8px;width:60px;height:70px;background-position: center center;background-size: cover; background-repeat:no-repeat;background-image: url(Downloads/chipzel-Super-HexagonEP(2012)[FLAC]/cover.jpg);"></div>
    	<span class="name">cover.jpg</span> <span class="details">296 KB</span> 
    </a> 
  </li>
  <li class="files" id="1">
  	<a href="Downloads/chipzel-Super-HexagonEP(2012)[FLAC]/whatpub.txt" title="Downloads/chipzel-Super-HexagonEP(2012)[FLAC]/whatpub.txt" class="files">
    	<span class="icon file f-txt">.txt</span><span class="name">whatpub.txt</span> 
        <span class="details">481 Bytes</span>
    </a> 
  </li>
</ul>




<div id="dialog-form" title="Create new user">
   <form>
    <fieldset>
      <label for="name">New File Name:</label>
      <input type="text" name="name" id="newName" value="" class="text ui-widget-content ui-corner-all"> 
      <!-- Allow form submission with keyboard without duplicating the dialog button -->
      <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
    </fieldset>
  </form>
</div>