jQuery的：在動態生成的列表項功能不起作用

我建立的函數的用於jQuery的：在動態生成的列表項功能不起作用

<input type="range">

對象顯示在一個HTML元素的值。

我的功能工作正常：

var rangeValues = { "50": "Fifty" , "100": "Hundred" , "...": "..." }; 

    $(function Skilllevel() { 
    $('#rangeText').text(rangeValues[$('#rangeInput').val()]); 
    $('#rangeInput').on('input change', function() 
     { 
     $('#rangeText').text(rangeValues[$(this).val()]); 
     }); 
    });

見jsfiddle

我的問題比如現在如下：我的推杆功能Skilllevel()成$.each(result, function進入它，它不工作，因爲從我的第二個JSON文件var urlBewerbungID = "json.php";生成一個單獨的列表元素$("#ergebnisSkill").append(

第二JSON看起來很簡單，就像這樣：

[ 
    "item1", 
    "item2", 
    "item3" 
]

我的完整功能：

//Skills selektieren 

var rangeValues = { 
    "0": "Keine", 
    "33": "Anfänger", 
    "66": "Fortgeschritten", 
    "99": "Profi" 
}; 

//Abfrage, welche Stelle gewählt wurde 
$('#bewerbungID').on('change', function() { 
    var bewerbungID = ($('#bewerbungID').val()); 
    console.log("BewerbungsID gewählt: " + bewerbungID); 

    //Zuerst das #HTML Element leeren 
    $("#ergebnisSkill").empty(); 

    $(document).ready(function() { 
    var urlBewerbungID = "json.php"; 
    $.getJSON(urlBewerbungID, function(result) { 
     console.log(result); 
     $.each(result, function(i, field) { 
     var skill = field; 

     //Skill liste erstellen 
     $(function Skilllevel() { 
      $('#rangeText').text(rangeValues[$('#rangeInput').val()]); 
      $('#rangeInput').on('input change', function() { 
      $('#rangeText').text(rangeValues[$(this).val()]); 
      }); 
     }); 

     //Jetzt HTML Element neu befüllen 
     $("#ergebnisSkill").append(

      '<li>' + 
      '<div class="item-content">' + 
      '<div class="item-media"><i class="icon f7-icons">star</i></div>' + 
      '<div class="item-inner">' + 
      '<div class="item-title label">' + skill + '<br> <span id="rangeText"></span></div>' + 
      '<div class="item-input">' + 
      '<div class="range-slider">' + 
      '<input type="range" id="rangeInput" min="0" max="99" value="0" step="33">' + 
      '</div>' + 
      '</div>' + 
      '</div>' + 
      '</div>' + 
      '</li>' 

     ); 

     }); 
    }); 
    }); 
});

來源

2017-04-16 fcb1900

您的代碼裏面出來。

您需要document.ready來包裝事件處理程序。
使用類而不是ID，ID需要是唯一的
使用委託 - 目前你有一個功能，每個結果不起作用。

需要分配給每一個結果，但委派技能功能 - 看看如何在ergebnisSkill點擊將由rangeInput捕獲：

//Skills selektieren 
 
var rangeValues = { 
 
    "0": "Keine", 
 
    "33": "Anfänger", 
 
    "66": "Fortgeschritten", 
 
    "99": "Profi" 
 
}; 
 

 

 
$(document).ready(function() { 
 

 
    //Skill liste erstellen 
 

 
    $("#ergebnisSkill").on('input change', ".rangeInput", function() { // delegation 
 
    $(this).closest("item-inner") // a parent div 
 
     .find('.rangeText') // the input field 
 
     .text(rangeValues[$(this).val()]); 
 
    }); 
 

 
    //Abfrage, welche Stelle gewählt wurde 
 
    $('#bewerbungID').on('change', function() { 
 
    var bewerbungID = ($('#bewerbungID').val()); 
 
    console.log("BewerbungsID gewählt: " + bewerbungID); 
 

 
    //Zuerst das #HTML Element leeren 
 
    $("#ergebnisSkill").empty(); 
 

 
    var urlBewerbungID = "json.php"; 
 
    $.getJSON(urlBewerbungID, function(result) { 
 
     console.log(result); 
 
     $.each(result, function(i, field) { 
 
     var skill = field; 
 

 

 
     //Jetzt HTML Element neu befüllen 
 
     $("#ergebnisSkill").append(
 

 
      '<li>' + 
 
      '<div class="item-content">' + 
 
      ' <div class="item-media"><i class="icon f7-icons">star</i></div>' + 
 
      ' <div class="item-inner">' + 
 
      ' <div class="item-title label">' + skill + '<br> <span class="rangeText"></span></div>' + 
 
      ' <div class="item-input">' + 
 
      '  <div class="range-slider">' + 
 
      '  <input type="range" class="rangeInput" min="0" max="99" value="0" step="33">' + 
 
      '  </div>' + 
 
      ' </div>' + 
 
      ' </div>' + 
 
      '</div>' + 
 
      '</li>' 
 

 
     ); 
 
     }); 
 
    }); 
 
    }); 
 
});

來源

2017-04-16 16:10:09 mplungjan

jQuery的：在動態生成的列表項功能不起作用

回答

相關問題