Выберите элемент с href в нем

Question

Я делаю файловый менеджер, где вы можете редактировать файлы навалом, но я не могу заставить функцию выбора работать.

Я использую этот Cute File Browser. Я дал ul элемент идентификатор и добавил этот скрипт на странице:

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

Но когда я нажимаю на элемент, он открывает URL вместо выбора его.

Answer 1

Возможно, придется использовать элемент ссылки и использовать e.preventDefault();

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

Надеется, что это помогает.

Answer 2

Вам необходимо изменить поведение по умолчанию навигации по щелкнутому URL и, если ваш элемент добавляется динамически, вам нужно использовать делегирование событий с JQuery в .on()':

Редактировать добавили использование jQuery UI's dialog(), чтобы вы начали с изменения имени файла. конечно, вам нужно будет изменить modifyFile(), чтобы на самом деле обновить файлы на вашем сервере.

Я скопировал html из инспектору, посмотрев страницу, которую вы предоставили. Одна вещь, я заметил id, что все ваши сгенерированные элементы li имеют одинаковый идентификатор «1». Вам нужно это исправить. Идентификаторы должны быть уникальными, независимо от того, что генерирует ваши элементы 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"> 
 
    \t <a href="Downloads/chipzel-Super-HexagonEP(2012)[FLAC]/01-Courtesy.flac" title="Downloads/chipzel-Super-HexagonEP(2012)[FLAC]/01-Courtesy.flac" class="files"> 
 
    \t <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"> 
 
    \t <a href="Downloads/chipzel-Super-HexagonEP(2012)[FLAC]/02-Otis.flac" title="Downloads/chipzel-Super-HexagonEP(2012)[FLAC]/02-Otis.flac" class="files"> 
 
    \t <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"> 
 
    \t <a href="Downloads/chipzel-Super-HexagonEP(2012)[FLAC]/03-Focus.flac" title="Downloads/chipzel-Super-HexagonEP(2012)[FLAC]/03-Focus.flac" class="files"> 
 
    \t \t <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"> 
 
    \t <a href="Downloads/chipzel-Super-HexagonEP(2012)[FLAC]/cover.jpg" title="Downloads/chipzel-Super-HexagonEP(2012)[FLAC]/cover.jpg" class="files"> 
 
    \t \t <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> 
 
    \t <span class="name">cover.jpg</span> <span class="details">296 KB</span> 
 
    </a> 
 
    </li> 
 
    <li class="files" id="1"> 
 
    \t <a href="Downloads/chipzel-Super-HexagonEP(2012)[FLAC]/whatpub.txt" title="Downloads/chipzel-Super-HexagonEP(2012)[FLAC]/whatpub.txt" class="files"> 
 
    \t <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>