JQuery 和 Google 可视化

发布于 2024-08-24 10:36:20 字数 1780 浏览 1 评论 0原文

我在我的页面中使用 JQuery。我的页面的一部分是 Google 可视化表，尝试在该表中使用 JQuery 会导致错误。基本上，我对所有具有“lala”类的表单使用了表单 Submit() 事件。正如您在下面的示例中看到的，Google 可视化表之外的两个表单工作正常。但是，表内的表单没有响应该事件...有什么想法吗？（示例位于 http://jsbin.com/izone/2 ）

HTML

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
<script type='text/javascript' src='http://www.google.com/jsapi'></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
 <div id='table_div'></div>
  <form class="lala"><input type="text" id="textv" value="Outer Text 1" size="5"><input type="submit" value="Go!"></form>
  <form class="lala"><input type="text" id="textv" value="Outer Text 2" size="5"><input type="submit" value="Go!"></form>
</body>
</html>

Javascript

$(document).ready(function(){
      $("form.lala").submit(function() {
        alert($('#textv',this).val());
      });      
});

google.load('visualization', '1', {packages:['table']});
      google.setOnLoadCallback(drawTable);
      function drawTable() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Form');
        data.addRows(1);
        data.setCell(0, 0, '<form class="lala"><input type="text" id="textv" value="Inner Text" size="5"><input type="submit" value="Go!"></form>');

       var table = new google.visualization.Table(document.getElementById('table_div'));
       table.draw(data, {'allowHtml':true});
      }

谢谢！乔尔

原文

I am using JQuery in my page. Part of my page is a Google Visualization table, and trying to use JQuery from within this table causes an error.. Basically I used a form submit() event to all forms with class "lala". As you can see in the example below, the two forms outside of the Google Visualization table work fine. However, the form inside the table does not response to the event... Any ideas?
(Example available at http://jsbin.com/izone/2 )

HTML

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
<script type='text/javascript' src='http://www.google.com/jsapi'></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
 <div id='table_div'></div>
  <form class="lala"><input type="text" id="textv" value="Outer Text 1" size="5"><input type="submit" value="Go!"></form>
  <form class="lala"><input type="text" id="textv" value="Outer Text 2" size="5"><input type="submit" value="Go!"></form>
</body>
</html>

Javascript

$(document).ready(function(){
      $("form.lala").submit(function() {
        alert($('#textv',this).val());
      });      
});

google.load('visualization', '1', {packages:['table']});
      google.setOnLoadCallback(drawTable);
      function drawTable() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Form');
        data.addRows(1);
        data.setCell(0, 0, '<form class="lala"><input type="text" id="textv" value="Inner Text" size="5"><input type="submit" value="Go!"></form>');

       var table = new google.visualization.Table(document.getElementById('table_div'));
       table.draw(data, {'allowHtml':true});
      }

Thanks!
Joel

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

猫弦 2024-08-31 10:36:20

您有两个具有相同 id 的 input - 通常不是一个好主意，特别是当您尝试通过 id 获取 input 的值时。

回复收藏 0 原文

永言不败 2024-08-31 10:36:20

您可以使用而不是使用 $(document).ready(function) google.visualization.events.addListener。将drawTable() 的最后两行更改如下：

    var table = new google.visualization.Table(document.getElementById('table_div'));
    google.visualization.events.addListener(table, 'ready', function() {
        $("form.lala").submit(function() {
            alert($('#text-in-form',this).val());
        });
    });
    table.draw(data, {'allowHtml':true});

请注意，我已将表中输入文本的id 更改为“text-in-form”。

Instead of using $(document).ready(function) you can use google.visualization.events.addListener. Change the last 2 lines of your drawTable() as following:

    var table = new google.visualization.Table(document.getElementById('table_div'));
    google.visualization.events.addListener(table, 'ready', function() {
        $("form.lala").submit(function() {
            alert($('#text-in-form',this).val());
        });
    });
    table.draw(data, {'allowHtml':true});

Notice I've changed the id of the input text in table to 'text-in-form'.

回复收藏 0 原文

~没有更多了~