javascript:如何在eval中使用“$(this)”

时间:2015-06-02 12:07:02

标签: javascript jquery ajax eval

在我的应用程序中,我使用eval运行通过ajax收到的javascript代码。

我希望能够在通过eval发送的javascript中使用$(this),以便在执行它的代码中使用它。真正的目的是将一些eval代码应用于执行它的最近父代:

$('.json').on('click', function(){ $.ajax(
//my stuff
).success(eval(text_received_via_ajax))});

我希望在text_received_via_ajax中有以下内容:

$(this).closest('.button').doSomething

其中$(this)是点击的实际$('。json')元素。

我该怎么做? 谢谢!

6 个答案:

答案 0 :(得分:2)

如果您正在编写这样的代码,那么它强烈暗示您的软件设计不好。

真的不需要使用eval()。不是为了这个,也不是为了其他任何东西。

在你的情况下,我建议调查jQuery's getScript method

此方法允许您在代码中的给定点按需加载新的Javascript文件。这将取代您现在正在进行的Ajax调用。

您可能还需要修改正在加载的代码,以便将其编写为可调用函数而不是JS代码的开放块。然后,您可以简单地调用它,传入this(或根据您的喜好绑定它),而无需使用eval()

更简单,更清晰的代码:更易于阅读,更易于维护,更不容易受到错误和黑客攻击,并且您也应该从中获得更好的性能。

答案 1 :(得分:0)

通过.bind(this)

$('.json').on('click', function(){ $.ajax(
  //my stuff
).success(eval(text_received_via_ajax.bind(this))});

这会将此上下文注入该函数。请参阅此处more information

答案 2 :(得分:0)

您的代码中有几个错误,eval变为:

$.ajax({...}).success($(this).closest('.button').doSomething());

上面的代码将起作用但不是预期的,因为会调用某些内容,然后函数调用的输出将被指定为成功处理程序。

在从请求中获取值之前,您如何评估?您需要进行一次可以为您评估的回调:

$.ajax({...}).success(function(text_received_via_ajax) {
  eval(text_received_via_ajax);
});

但是等等!现在上下文(this)是错误的,因为处理程序中的this将成为ajax请求。要解决此问题,您需要使用以下命令绑定处理程序的上下文:

function() { console.log(this === newContext); }.bind(newContext)

或者对于较旧的浏览器,jQuery提供$.proxy(fn, newContext)

$('.json').on('click', function(){
  $.ajax({...}).success($.proxy(function(text_received_via_ajax) {
    eval(text_received_via_ajax);
  }, this));

但请首先使用eval重新考虑!

您可能能够对程序的行为方式提出某种定义,并发送该定义,例如:

{
  'doSomething': true,
  'selector': '.button'
}

然后像这样处理:

var def = { /* the above definition */ }
var $el = $(this).closest(def.selector);

if ( def.doSomething ) $el.doSomething();

答案 3 :(得分:0)

公平的警告:使用eval很危险,请确保你知道自己在做什么

由于eval适用于全局范围,因此您必须利用全局范围来实现您想要实现的目标。

从我的观点来看,有两种方法可以做到: 1.将您的eval-code包装到您在eval调用后执行的命名函数中 2.将其保存在具有特定名称的全局变量中,然后在eval-code

中使用

1的示例:

var evalString = "console.log(this);"
var random = Math.random();
var changedEvalString = "function _reference_this() {" +
                          evalString +
                        "}"
eval(changedEvalString); //does not execute a thing
_reference_this.apply(this); //calls your code with the correct this

2的例子:

window._saved_this = this;
eval("console.log(_saved_this)")

我认为解决方案1更清洁,但解决方案2可能更容易。

答案 4 :(得分:0)

Json元素返回了哪个值? 返回元素id或类值?

如果是,您可以使用addEventListener方法或绑定或等于

$('.json').on('click', function(){

$this = this;

    $.ajax({
        type: 'POST',
        url: _url,
        data: 'id=' + data_item,
        dataType: 'JSON',
        success: function (ReturnedJSON) {

$($this).addEventListener('click',function(){
do somethings...
});

$(ReturnedJSON).addEventListener('click',function(){
do somethings...
});

// --- OR ---

$($this).click(function(){
do somethings...
});

$(ReturnedJSON).click(function(){
do somethings...
});

    });

});

我使用$ this val。对于Ajax方法是异步的,所以需要一个载波val 或者你可以在ajax道具上添加这个参数。 “”async:false“”

或者在这里修改另一个代码

var JSON = $.ajax({
dataType: 'JSON',
type: 'POST',
async: false,   ---- if this prop have on ajax method. Javascript waiting complate event for next rows.
url: 'GetModel',
data: 'brand=' + $brand

            }).responseJSON;

答案 5 :(得分:0)

通过在匿名函数中使用event参数,您可以使用激活事件的类'.json'访问该元素:

$('.json').on('click', function(event) {
    $.ajax().success(
        eval(text_received_via_ajax)
        $(event.target).closest('.button').doSomething
)});