Question

问题在于我有一些动态创建的输入标签集，而且我还有一个功能，可以在输入值发生变化时触发。

$('input').on('change', function() {
  // Does some stuff and logs the event to the console
});

但是，.on('change')不会触发任何动态创建的输入，仅适用于加载页面时存在的项目。不幸的是，由于.on是.live()和.delegate()的替代，所有这些都是.bind()的包装，因此这让我有点绑定：/ {/ p >

是否有其他人遇到此问题或知道解决方案？

Answer 1

您应该为on功能提供一个选择器：

$(document).on('change', 'input', function() {
  // Does some stuff and logs the event to the console
});

在这种情况下，它会按预期工作。此外，最好指定一些元素而不是文档。

阅读本文以便更好地理解：http://elijahmanor.com/differences-between-jquery-bind-vs-live-vs-delegate-vs-on/

Answer 2

使用此

public function infoRoute(Request $request)
    {
        // Get info
        $ship_id = $request->ship_id;
        $startDate = $request->datepicker_start;
        $endDate = $request->datepicker_end;

        // Get all the locations between those dates
        $routeArray = $this->measurementRepository->getCoordinates($ship_id, $startDate, $endDate);

        $ship = $this->shipRepository->getShipForId($ship_id);
        $info = $this->createRouteArrayForShip($ship, $routeArray);

        if($request->ajax()) {
            return response()->json(json_encode($info));
        }
    }

    protected function createRouteArrayForShip($ship, $routeArray)
    {
        $info['type'] = "showRoute";

        $index = 0;

        foreach($routeArray as $coordinates)
        {
            $info['info']['route']['loc'. $index] = $coordinates;
            $index++;
        }

        $info['info']['shipInfo'] = $ship;

        //dd($info);
        return $info;
    }

Answer 3

您可以采用任何一种方法：

$("#Input_Id").change(function(){   // 1st
    // do your code here
    // When your element is already rendered
});


$("#Input_Id").on('change', function(){    // 2nd (A)
    // do your code here
    // It will specifically called on change of your element
});

$("body").on('change', '#Input_Id', function(){    // 2nd (B)
    // do your code here
    // It will filter the element "Input_Id" from the "body" and apply "onChange effect" on it
});

Answer 4

只是澄清一些潜在的混淆。这仅在DOM加载时存在元素时才有效：

$("#target").change(function(){
    //does some stuff;
});

稍后动态加载元素时，您可以使用：

$(".parent-element").on('change', '#target', function(){
   //does some stuff;
});

Answer 5

$(document).on('change', '#id', aFunc);

function aFunc() {
  // code here...
}

Answer 6

$("#id").change(function(){
    //does some stuff;
});

Answer 7

您可以使用“ input”事件，该事件在元素获得用户输入时发生。

$(document).on('input', '#input_id', function() {
  // this will fire all possible change actions
});

w3的文档

Answer 8

您可以使用：

$('body').ready(function(){
   $(document).on('change', '#elemID', function(){
      // do something
   });
});

对我有用。

jQuery .on（'change'，function（）{}不触发动态创建的输入

8 个答案: