web-dev-qa-db-fra.com

événement onclick passe <li> id ou valeur

Je veux passer <li> id or value dans l'événement onclick. voici mon code existant.

<li onclick="getPaging(this.value)" id="1" value="1">1</li>
<li onclick="getPaging(this.value)" id="2" value="2">2</li>

voici le code javascript

function getPaging(str)
{
$("#loading-content").load("dataSearch.php?"+str, hideLoader);
}
jqueryeventsonclickhtml-lists
16
Sasindu H

Essayez comme ça ...

<script>
function getPaging(str) {
  $("#loading-content").load("dataSearch.php?"+str, hideLoader);
}
</script>

<li onclick="getPaging(this.id)" id="1">1</li>
<li onclick="getPaging(this.id)" id="2">2</li>

ou discrètement

$(function() {
  $("li").on("click",function() {
    showLoader();
    $("#loading-content").load("dataSearch.php?"+this.id, hideLoader);
  });
});

en utilisant juste

<li id="1">1</li>
<li id="2">2</li>
20
Anish

<li>s n'ont pas de value - seules les entrées de formulaire en ont. En fait, vous n'êtes même pas censé inclure l'attribut value dans le code HTML de <li>s.

Vous pouvez compter sur .innerHTML à la place:

getPaging(this.innerHTML)

Ou peut-être la id:

getPaging(this.id);

Cependant, il est plus facile (et plus pratique) d’ajouter les gestionnaires de clics à partir de code JavaScript et de ne pas les inclure dans le code HTML. Étant donné que vous utilisez déjà jQuery, vous pouvez facilement y parvenir en modifiant votre code HTML en:

<li class="clickMe">1</li>
<li class="clickMe">2</li>

Et utilisez le JavaScript suivant:

$(function () {
    $('.clickMe').click(function () {
        var str = $(this).text();
        $('#loading-content').load('dataSearch.php?' + str, hideLoader);
    });
});

Cela ajoutera le même gestionnaire de clics à tous vos <li class="clickMe">s, sans vous obliger à dupliquer votre code onclick="getPaging(this.value)" pour chacun d'eux.

10
David Tang

Essaye ça:

<li onclick="getPaging(this.id)" id="1">1</li>
<li onclick="getPaging(this.id)" id="2">2</li>


function getPaging(str)
{
    $("#loading-content").load("dataSearch.php?"+str, hideLoader);
}
1
Hasan Fahim

Je préfère utiliser l'API de données HTML5, consultez cette documentation:

Un exemple

$('#some-list li').click(function() {
  var textLoaded = 'Loading element with id='
         + $(this).data('id');
   $('#loading-content').text(textLoaded);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id='some-list'>
  <li data-id='1'>One </li>
  <li data-id='2'>Two </li>
  <!-- ... more li -->
  <li data-id='n'>Other</li>
</ul>

<h1 id='loading-content'></h1>

1
fitorec