我希望我的功能在新的表格行中工作

问题描述：

我有一个jsfiddle，用户打开一个网格并选择一个选项，在用户选择一个选项后，如果他们点击“添加问题”按钮，它会显示新表格行中的选项。我希望我的功能在新的表格行中工作

正如您在新表格行中看到的那样，它显示文本框和打开的网格链接。我这样做是因为可以说你已经添加了一个选项，但是后来意识到你选择了错误的选项，我希望用户能够点击任何相关行中的“Open Grid”链接，然后点击他们更喜欢的选项。换句话说，我希望用户能够在表格行中选择一个选项，就像在新行中添加选项之前使用上述功能选择选项一样。

我使用.on（）函数来做到这一点，但我的问题是，如果我尝试打开输出行之一的网格，它不会打开网格。那么如何获取它，以便用户可以像从上述功能中选择选项一样从表格行中选择一个选项。

我的代码是在jsfiddle中，点击here，如果有人确实有一个想法，然后随意使用小提琴来测试你的想法。

谢谢

我知道这不是回答你的具体问题（我仍然可以帮你），但为什么不只是有一个'删除行'选项？这会涉及更少的代码，并且将来可能更容易维护。 – JesseBuesking 2011-12-20 15:52:27

因为将来用户不仅要添加选项类型，而且要添加问题，选项，答案，问题权重和问题持续时间，如果用户删除了一行，那么他们必须再次填充细节，而如果他们可以编辑一行，则可能需要更少的时间，然后再删除一行并重新填充，老实说，允许用户编辑行中的功能或可能是一个好主意删除一行，如果他们犯了一个巨大的错误，你怎么看？ – BruceyBandit 2011-12-20 15:55:47

这对我来说听起来很不错; p尽管并非总是如此，但您的gui越灵活，用户的体验就越好。 – JesseBuesking 2011-12-20 16:15:46

答

您需要更换

$('.showGrid').on('click', function...

与

$(document).on('click', '.showGrid', function...

得到.live()样的功能。你还需要在你的附加链接，请更改.showGridRow类.showGrid，或者另外进行以下变化：

$(document).on('click', '.showGrid,.showGridRow', function...

这留下了“网格”在同一个地方被弹出的问题，无论你在哪里单击。

 $('#optionTypeTbl').css({ 
      left: $(this).position().left, 
      top: $(this).position().top + 20 
     });

http://jsfiddle.net/mblase75/f8cKm/15/

嗨，唯一的问题如果我点击一行中的“开放网格”链接并选择一个选项，则假设更改该行文本框中的值而不是顶部文本框中的值 – BruceyBandit 2011-12-20 16:02:52

@ mblase75这可能是最好的方法，但可以还可以获取单击元素的上下文以确定正在使用的框的位置。 – JesseBuesking 2011-12-20 16:14:01

如何给每个输入一个不同的名称，因为它只是显示每行输入的一行代码？ – BruceyBandit 2011-12-20 16:16:25

答

更换功能：

$('.showGrid').on('click', function(e) 

    { 

     if ($('#optionTypeTbl').css("display") == "table") { 

      $('#optionTypeTbl').hide(); 

     } else { 

      $('#optionTypeTbl').fadeIn('slow'); 
      $('#optionTypeTbl').css("display", "table"); 

     } 
     e.stopPropagation(); 
    });

有：

$('.showGrid,.showGridRow').live("click", function(event){ 
    event.preventDefault(); 
    if ($('#optionTypeTbl').css("display") == "table") { 
     $('#optionTypeTbl').hide(); 
    } else { 
     $('#optionTypeTbl').fadeIn('slow'); 
     $('#optionTypeTbl').css("display", "table"); 
    } 
    e.stopPropagation(); 
});

见This fiddle

当你已经拥有'.on'时，为什么要回到'.live'？（已授予jQuery内部转换为另一个，但仍然） – Blazemonger 2011-12-20 15:54:42

我注意到'.showGridRow'没有绑定到一个单击事件，所以我组合了两个选择器并将click事件绑定到它们，它工作正常。 – 2011-12-20 15:56:34

嗨，唯一的问题是，如果我点击一行中的“打开网格”链接并选择一个选项，它是假设更改该行的文本框中的值而不是顶部文本框中的值 – BruceyBandit 2011-12-20 16:02:58

答

对于得到补充，你将需要使用.live（）作为钟表DOM更新行和：我通过添加下面一行到你的“节目”代码解决了这个附加功能的事件。所以，你可以做这样一些事情。

$('.showGridRow').live(function(event){ 
event.preventDefault; 
alert('code goes here'); 
});

你还需要使用一个变量来存储要更新的值的输入。所以，你在做一些这样的事你选项弹出功能

input_box = $(this).parent().find('input');

然后使用input_box.val（）;后者在你的选项中选择回调。

查看here进行工作演示。

它不打开网格，如果我点击任何行上的打开网格 – BruceyBandit 2011-12-20 16:12:34

我希望我的功能在新的表格行中工作

相关推荐