绑定/单击上的JQuery参数注入与带参数的嵌入式点击处理程序
所以旧的JavaScript爱好者和年轻的jQuery向导在我身上有一些分歧。 对于长时间的设置很抱歉，但问题的核心是是否直接在我的HTML中嵌入onClick代码或者使用jQuery样式并使用bind()或click() 。 我发现自己和我自己经常不同意这个话题，所以我想我会尝试就这个问题进行一些讨论。 为了解释这个问题，下面的模式似乎最常见到这一点。
典型例子
我正在写一个成员目录的搜索。 在我的界面上，我有各种过滤条件，如“性别”，“成员自”和“有个人资料照片”。 标准看起来像这样……
- 用户可以通过单击文本（例如“女性”）或选择单选按钮来选择选项。
- 选择后，选择相应的单选按钮，文本将加粗
我的html最终看起来像……
Gender: Any
当用户点击文本链接时，问题确实会出现。 那时我需要知道要更改哪个无线电设备，将文本链接到粗体，并采用新选择的文本并更改我的标题标签。 我看到了一些使这种类型的场景工作的选项。
让它工作的选项
jQuery注入与聪明的元素名称
我可以使用jQuery以通用方式绑定到我的元素。 $('#FinderBodyDIV input:radio').click(SearchOption_Click); 然后通过巧妙的dom检查来挑选出适当的ID和文本。 例如，名称我的超链接可以命名为GenderID_Link_1 ，其中1是我应该选择的ID， GenderID告诉我要更改哪个无线电设置。 我可以使用’.parents（）的组合 and .siblings（）`找到隔壁的收音机并用ID设置它。
- 这很好，因为我的绑定代码很简单，我的jQuery与HTML分开
- 这很糟糕，因为我的代码现在正在运行，实际上取决于脆弱的HTML结构和命名。
使用eventData单独绑定元素
另一种选择是收集我的元素集，并为每个单独的元素执行’bind（）’传递eventData。
var elements = $('#FinderBodyDIV input:radio'); elements.each ( FunctionWithLogicToBindPassingEventData );
- 这是令人满意的，因为我将用于绑定事件数据的逻辑与脆弱的HTML结构分开。
- 这很糟糕，因为我只是将脆弱的部分移动到一个新function
- 这也很糟糕，因为我引入了减慢（相对）绑定（更多DOM遍历）。
在HTML中嵌入onClick代码
这是我的旧JavaScript倾向一直带我的地方。 我没有使用jQuery来注入绑定，而是将链接/单选按钮HTML更改为包含单击处理程序。 就像是 …
Male
- 这是令人满意的，因为我知道我生成HTML时的值，所以我简化了我的生活。
- 我已经删除了很多依赖于我的HTML结构（尽管不是全部）。
- 另一方面，我将JS和HTML混合在一起。
- 感觉很脏。
那么男孩该怎么办？
这似乎是一种相当常见的情况。 除了我上面描述的情况之外，我发现它在很多情况下都会出现。 我在Twitter上搜索了interweb，blogumentation和技术文章。 然而，我没有看到有人在谈论这个问题。 也许我只是不知道如何说出这个问题。 不管是什么原因，我对我提出的任何解决方案都不满意。
它实际上归结为如何将点击的元素与其相关数据相关联 – JSON，嵌入HTML名称或其他方式。 你有什么看法？
轻拍的答案是在输入元素中嵌入onClick调用违背了不引人注目的javascript概念。 但是，我是那种开发人员，如果它完成了jorb并且观众不太可能禁用javascript，那么无论如何都会继续使用它。
如果我正确理解问题，你需要一种方法来做jQuery风格的事情，而不依赖于html结构等。 给你的单选按钮一个类名，例如，“男性”单选按钮可以有class =“Male”，你可以通过jQuery更容易地选择它。
额外奖励：在某些情况下，您可能需要为多个类分配一些元素，例如，您按语言和国家/地区进行过滤。 所以你可以像这样分配一些元素多个类：
$('#someElement').addClass('French').addClass('fr-FR');
然后使用任何一个类选择它。