jquery - 无法使内联表单标签在 InfoWindow 中工作

Question

我快被这个搞疯了。我尝试了在网络上找到的所有可能的解决方案(似乎对每个人都适用)，但似乎没有一个可行，因为我希望它在 Google map 信息窗口中。

InfoWindow 内容是通过 Ajax 加载的，因此我不确定将 Jquery 位放在哪里 - 尽管我已经尝试(我认为!)所有可能的组合。

尝试过的解决方案: Making Awesome Form’s Inline Labels with jQuery , jQuery Inline Form Labels , Awesome Inline Form Labels和其他人……

唯一有效的是 HTML5 的 placeholder 但我对此并不满意，因为它在 IE10 以下效果不佳。

这是所需效果的快照:

我希望它在下面的这个 InfoWindow 中工作。看到文字“Nome optional”了吗？我希望它是一个内联模糊标签，如上图。

这是用于加载 InfoWindow 内容的代码:

function load_newinfowindow_content(lat, long, infowindow){
    $.ajax({
    url: site_root +'map/newmarker_infowindow/'+lat+'/'+long,
    success: function(data){
      infowindow.setContent(data);
    }
  });
}

信息窗口是基本的 HTML 形式。 CSS 对于所有页面都是全局的，包括 InfoWindow(并且工作正常)。

<form name="newMark" id="newMark" method=post action="<?php echo base_url();?>map/new_marker">
<input type=hidden name=latitude value="<?php echo $lat;?>"><input type=hidden name=longitude value="<?php echo $long;?>">
Deseja criar uma nova marcação aqui?
<label for="name">Nome opcional</label>
<input class="text name" type="text" id="name" name="name" size="20"/>
<input type="submit" value="Sim">

我已经尝试将 JQuery 的 ready 代码放在 InfoWindow HTML 中和调用页面的“外部”。两者都不起作用。关于为什么这在 InfoWindow 中不起作用的任何提示？

Answer 1

成功了!通过尝试将 Javascript 代码放置在不同的位置，并按照评论中的建议，甚至尝试使用 InfoWindow 的 domready 事件，我发现它唯一真正有效的地方。

在我加载内容的 AJAX 调用中，它变成了这样:

function load_newinfowindow_content(lat, long, infowindow){
    $.ajax({
    url: site_root +'map/newmarker_infowindow/'+lat+'/'+long,
    success: function(data){
      infowindow.setContent(data);
      processInLineLabels();
    }
  });
}

$( document ).ready(function() 出现在所有解决方案中，我把它变成了一个函数，如下面的函数(但它应该适用于其他函数好吧)。

function processInLineLabels() {
  $('input[title]').each(function() {
      if($(this).val() === '') {
         $(this).val($(this).attr('title')); 
      }

   $(this).focus(function() {
      if($(this).val() == $(this).attr('title')) {
         $(this).val('').addClass('focused');  
      }
    });
    $(this).blur(function() {
       if($(this).val() === '') {
           $(this).val($(this).attr('title')).removeClass('focused');  
       }
     });
 });
}