Question

我有一个查询数据库的网页，并根据地图大小的变化动态生成元素。我有一个按钮，点击后，放大地图，第二次点击，将地图恢复为原始大小。我想使用toggleClass方法将新样式应用于生成的元素。以下是我的代码的相关部分：

<script type='text/javascript'>
 $(document).ready(function() {
  $('button').click(function() {
   // resize the map
   google.maps.event.trigger(map, 'resize'); // trigger ajax response
   $('.element').toggleClass('new_style'); // this fail to apply new style
  });
 });

 function processData() {
  var div$ = displayResult();
  $('#results').append(div$);
 }

 function displayResult() {
  var R = $('<div class="element">// some content</div>');
  return R;
 }
</script>

<div id='map'></div>

<script type='text/javascript'>
 var map = new google.maps.Map(document.getElementById('map'), options);
 google.maps.event.addListener(map, 'idle', function () {
  $.getJSON(query, processData);
 }
</script>

如何将新样式应用于动态生成的元素？以上不起作用。

注意：我确实看到new_style在被新生成的<div>替换之前被应用到旧setTimeout。

进一步更新：我使用$('.element').toggleClass('new_style');函数包装下面的语句并且它有效。虽然不是必需的解决方案。

{{1}}

Answer 1

创建一个新元素，然后使用JQuery shoudl“选择”它，除非代码错误（参见jb comment）。

唯一不起作用的是如果在特定元素上绑定方法并创建新元素。除非使用jquery插件或函数live

，否则新元素将不具有bind（ed？）方法

Answer 2

试试这个

$(document).ready(function(){
    var myDiv=$('<div class="element">some content</div>');    
    $('#results').append(myDiv);

    $('button').click(function() {
        google.maps.event.trigger(map, 'resize'); // trigger ajax response
        $('.element').toggleClass('new_style'); 
    });
});

小提琴here。在您的示例中，class = element应该是class =“element”。

Answer 3

我认为results是在已初始化Google地图的div中定义的。将它保存在地图容器之外应该可行。

否则，您可以尝试以下操作 - 只需在完成地图大小调整后调用JSON请求。

$('button').click(function() {

    // resize the map
     google.maps.event.trigger(map, 'resize'); // trigger google map resize

    // var jsonResponse = something goes here

     $('#results').append(jsonResponse);  // append the results
     $('.element').toggleClass('new_style'); // here apply new style
});

如何切换动态生成的元素？

3 个答案: