如何将一个按钮作为html添加到div并添加单击功能

时间:2016-03-12 08:41:04

标签: javascript jquery html

在下面的代码中,按钮“alt2”显示但不警告“hi”

这是添加按钮的正确方法吗?

video:not(.video-js) {
    width: 100%;
    height: auto !important;
}

2 个答案:

答案 0 :(得分:2)

                  package com.ambujkathotiya.swachhb.activity;

import android.Manifest;
import android.content.Context;
import android.content.Intent;
import android.content.pm.PackageManager;
import android.location.Location;
import android.location.LocationListener;
import android.location.LocationManager;
import android.net.ConnectivityManager;
import android.net.NetworkInfo;
import android.net.Uri;
import android.os.Build;
import android.os.Bundle;
import android.os.Environment;
import android.os.StrictMode;
import android.provider.MediaStore;
import android.provider.Settings;
import android.support.v4.content.ContextCompat;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.view.View;
import android.widget.ImageButton;
import android.widget.Toast;

import com.ambujkathotiya.swachhb.R;

import java.io.File;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.Locale;

public class MainActivity extends AppCompatActivity implements     LocationListener {

private static String TAG = MainActivity.class.getSimpleName();

String longi;
String lat;
LocationManager locationManager;


// Camera activity request codes
private static final int CAMERA_CAPTURE_IMAGE_REQUEST_CODE = 100;

public static final int MEDIA_TYPE_IMAGE = 1;

private Uri fileUri; // file url to store image/video


@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);


    //Main code
    if (Build.VERSION.SDK_INT > Build.VERSION_CODES.GINGERBREAD) {
        StrictMode.ThreadPolicy tp = new StrictMode.ThreadPolicy.Builder().permitAll().build();
        StrictMode.setThreadPolicy(tp);
    }

    // Changing action bar background color
    // These two lines are not needed


    ImageButton btnCapturePicture = (ImageButton) findViewById(R.id.btnCapturePicture);


    /**
     * Capture image button click event
     */
    btnCapturePicture.setOnClickListener(new View.OnClickListener() {

        @Override
        public void onClick(View v) {
            // capture picture
            ConnectivityManager connectivity = (ConnectivityManager) getApplicationContext().getSystemService(Context.CONNECTIVITY_SERVICE);
            NetworkInfo netinfo = connectivity.getActiveNetworkInfo();
            if (netinfo != null && netinfo.isConnected()) {
                // Internet Connection is present
                //Check if location services is switched on or not

                LocationManager locManager = (LocationManager) getSystemService(LOCATION_SERVICE);

                if (locManager.isProviderEnabled(LocationManager.GPS_PROVIDER)) {
                    //Location services enabled
                    //Call the camera
                    captureImage();
                } else {
                    //Location services not enabled
                    Intent intent = new Intent(Settings.ACTION_LOCATION_SOURCE_SETTINGS);
                    startActivity(intent);
                }

            } else {
                // Internet connection is not present
                Toast.makeText(getApplicationContext(),
                        "Sorry! You need an internet connection to proceed.",
                        Toast.LENGTH_LONG).show();

            }

        }
    });


    // Checking camera availability
    if (!isDeviceSupportCamera()) {
        Toast.makeText(getApplicationContext(),
                "Sorry! Your device doesn't support camera",
                Toast.LENGTH_LONG).show();
        // will close the app if the device does't have camera
        finish();
    }
}

/**
 * Checking device has camera hardware or not
 * */
private boolean isDeviceSupportCamera() {
    // this device has a camera
// no camera on this device
    return      getApplicationContext().getPackageManager().hasSystemFeature(
            PackageManager.FEATURE_CAMERA);
}

/**
 * Launching camera app to capture image
 */
private void captureImage() {
    Intent intent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);

    fileUri = getOutputMediaFileUri(MEDIA_TYPE_IMAGE);

    intent.putExtra(MediaStore.EXTRA_OUTPUT, fileUri);

    // start the image capture Intent
    startActivityForResult(intent, CAMERA_CAPTURE_IMAGE_REQUEST_CODE);
}



/**
 * Here we store the file url as it will be null after returning from camera
 * app
 */
@Override
protected void onSaveInstanceState(Bundle outState) {
    super.onSaveInstanceState(outState);

    // save file url in bundle as it will be null on screen orientation
    // changes
    outState.putParcelable("file_uri", fileUri);
}

@Override
protected void onRestoreInstanceState(Bundle savedInstanceState) {
    super.onRestoreInstanceState(savedInstanceState);

    // get the file url
    fileUri = savedInstanceState.getParcelable("file_uri");
}



/**
 * Receiving activity result method will be called after closing the camera
 * */
@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
    // if the result is capturing Image
    if (requestCode == CAMERA_CAPTURE_IMAGE_REQUEST_CODE) {
        if (resultCode == RESULT_OK) {

            // successfully captured the image
            // launching upload activity
            getLocation();
            Log.d(TAG, "hi" + lat);
            Log.d(TAG, "hello"+longi);
            launchUploadActivity(true);


        } else if (resultCode == RESULT_CANCELED) {

            // user cancelled Image capture
            Toast.makeText(getApplicationContext(),
                    "User cancelled image capture", Toast.LENGTH_SHORT)
                    .show();

        } else {
            // failed to capture image
            Toast.makeText(getApplicationContext(),
                    "Sorry! Failed to capture image", Toast.LENGTH_SHORT)
                    .show();
        }

    }

}

private void launchUploadActivity(boolean isImage){

    Intent i = new Intent(MainActivity.this, UploadActivity.class);
    i.putExtra("filePath", fileUri.getPath());
    i.putExtra("isImage", isImage);
    i.putExtra("lat",lat);
    i.putExtra("longi",longi);
    startActivity(i);
}

/**
 * ------------ Helper Methods ----------------------
 * */

/**
 * Creating file uri to store image/video
 */
public Uri getOutputMediaFileUri(int type) {
    return Uri.fromFile(getOutputMediaFile(type));
}

/**
 * returning image / video
 */
private static File getOutputMediaFile(int type) {

    // External sdcard location
    File mediaStorageDir = new File(
            Environment
                    .getExternalStoragePublicDirectory(Environment.DIRECTORY_PICTURES),
            Config.IMAGE_DIRECTORY_NAME);

    // Create the storage directory if it does not exist
    if (!mediaStorageDir.exists()) {
        if (!mediaStorageDir.mkdirs()) {
            Log.d(TAG, "Oops! Failed create "
                    + Config.IMAGE_DIRECTORY_NAME + " directory");
            return null;
        }
    }

    // Create a media file name
    String timeStamp = new SimpleDateFormat("yyyyMMdd_HHmmss",
            Locale.getDefault()).format(new Date());
    File mediaFile;
    if (type == MEDIA_TYPE_IMAGE) {
        mediaFile = new File(mediaStorageDir.getPath() + File.separator
                + "IMG_" + timeStamp + ".jpg");
    } else {
        return null;
    }

    return mediaFile;
}



@Override
public void onLocationChanged(Location location) {

}


@Override
public void onProviderDisabled(String provider) {

}


@Override
public void onProviderEnabled(String provider) {

}


@Override
public void onStatusChanged(String provider, int status, Bundle extras) {
}

public void getLocation()
{
    //Location code
    locationManager = (LocationManager) getSystemService(Context.LOCATION_SERVICE);
    //If location manager returns not null,then save the lat and long
    if (locationManager != null) {
        if (ContextCompat.checkSelfPermission(getApplicationContext(), Manifest.permission.ACCESS_FINE_LOCATION) == PackageManager.PERMISSION_GRANTED || ContextCompat.checkSelfPermission(getApplicationContext(), Manifest.permission.ACCESS_COARSE_LOCATION) == PackageManager.PERMISSION_GRANTED) {
            locationManager.requestLocationUpdates(LocationManager.NETWORK_PROVIDER, 0, 0,this);
            Location location = locationManager.getLastKnownLocation(LocationManager.NETWORK_PROVIDER);
            locationManager.requestLocationUpdates(LocationManager.GPS_PROVIDER, 0, 0, this);
            Location location1 = locationManager.getLastKnownLocation(LocationManager.GPS_PROVIDER);
            if (location != null) {
                double latitude = location.getLatitude();
                double longitude = location.getLongitude();
                lat = Double.toString(latitude);
                longi = Double.toString(longitude);
            }
            else if(location1 != null){
                double latitude = location1.getLatitude();
                double longitude = location1.getLongitude();
                lat = Double.toString(latitude);
                longi = Double.toString(longitude);
            }
            else {
                finish();
            }
        } else {
            finish();
        }
        //Remove the request for location updates.
        locationManager.removeUpdates(this);
    } else {

        finish();
    }
}

}
$("#add").click(function() {
  $("#test").html("<button id='alt2'>alt2</button>");
});
$("#alt").click(function() {
  alert("hi");

});

$(document).on('click',"#alt2",function() { // use .on()
  alert("hi 2");

});

使用.on()动态添加元素。

  

描述:将一个或多个事件的事件处理函数附加到所选元素。

答案 1 :(得分:2)

缺少第二个alt2的

on("click")...。我还建议您使用on("click")...代替.("click").("click")这个人可能会错过第二次开火

<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div id="test"></div><br>
<button id="add">add</button><br>
<button id='alt'>alt1</button>
<script type="text/javascript" >
$(function(){
	
	$(document).on("click", "#add", function(e) {
		e.preventDefault();
    
        $("#test").html("<button id='alt2'>alt2</button>");     
    });
	
	
	$(document).on("click", "#alt", function(e) {
		e.preventDefault();
    
        alert("hi 1");

    }); 	
	
	$(document).on("click", "#alt2", function(e) {
		e.preventDefault();
    
        alert("hi 2");

    }); 

});

</script>
</body>